watchEffect函数

  • watch的套路是:既要指明监视的属性,也要指明监视的回调
  • watchEffect的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性
  • watchEffect有点像computed:
    • 但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值
    • 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值
<script>
    //使用setup的注意事项
    import { ref,reactive,watchEffect } from 'vue'

    export default {
        name: 'test5',
        props: ['msg'],
        emits:['hello'],
        setup(){
            let sum  = ref(0)
            let msg = ref('你好啊')
            let person = reactive({
                name: '张三',
                age: 18,
                job:{
                    salary: '15k'
                },
            })

            //用处: 如果是比较复杂的业务,发票报销等,那就不许需要去监听其他依赖,只要发生变化,立马重新回调
            //注重逻辑过程,你发生改变了我就重新执行回调,不用就不执行,只执行一次
            watchEffect(()=>{
                //这里面你用到了谁就监视谁,里面就发生回调
                const x1 = sum.value
                console.log('我调用了');
            })

            return {
                sum,
                msg,
                person,
            }
        },

    }
</script>
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《watchEffect函数》
文章链接:https://zhuji.vsping.com/4556.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。