关于前端:vue3中-watchwatchEffect区别

34次阅读

共计 961 个字符，预计需要花费 3 分钟才能阅读完成。

1、watch 是惰性执行，也就是只有监听的值发生变化的时候才会执行，然而 watchEffect 不同，每次代码加载 watchEffect 都会执行（疏忽 watch 第三个参数的配置，如果批改配置项也能够实现立刻执行）

2、watch 须要传递监听的对象，watchEffect 不须要

3、watch 只能监听响应式数据：ref 定义的属性和 reactive 定义的对象，如果间接监听 reactive 定义对象中的属性是不容许的，除非应用函数转换一下

4、watchEffect 如果监听 reactive 定义的对象是不起作用的，只能监听对象中的属性。

    let count = ref(0)
    let countObj = reactive({count: 0})

    // 惰性，首次加载不执行
    watch(count, (newVal, oldVal) =>{console.log(newVal, oldVal)} )
    // watch 不能间接监听 reactive 外面的属性，只能监听 ref、reactiveObject，function，array, 如果想监听 reactive 的某个属性，那么须要转换成函数
    watch(() => countObj.count, (newVal, oldVal) => {console.log(oldVal, newVal)}, {})
    watch (countObj, (newVal, oldVal) => {console.log(newVal, oldVal)
    })
    // 监听多个值，后面是监听数据的数组，前面的参数是两个数组，后面数组是变动后监听对象值的数组，前面是变动前监听对象值的数组
    watch ([countObj, count], ([oneNewName, twoNewName], [oneOldName, twoOldName]) => {console.log(oneNewName, oneOldName, twoNewName, twoOldName)
    })
    // watchEffect，和 watch 不一样，1、会立刻执行，只有定义了就会执行。2、他只能监听某个值，监听对象不论用。3、不须要传递参数，会主动管制代码中的变量。4、没法获取 newVal 和 oldVal
    const watchEf = watchEffect(() => {console.log(countObj.count)
    })

正文完