一文讲清楚vue3中watchEffect的使用

基本使用

在Vue 3中，watchEffect 是一个用于创建响应式副作用的 API。与 watch 和 computed 不同，watchEffect 不需要显式地依赖于响应式数据，而是自动追踪其使用的所有响应式依赖，并在这些依赖发生变化时重新运行其回调函数。需要注意的是，watchEffect会在组件挂载时自动执行一次，效果就像watch配置了immediate为true一样

import { reactive, watchEffect } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

let template = `
    <div>{{data.count}}</div>
    <button @click="data.count++">+1</button>
`

export default {
    setup: function () {
        let data = reactive({
            count: 0
        })

        watchEffect(()=>{
            console.log('watchEffect',data.count)
        })

        return { data }
    },
    template
}

当我们点击页面上的+1按钮时，会引发data.count的变化，而watchEffect中依赖这个数据，就会自动执行回调函数打印结果

取消侦听

一般情况下，侦听器会被链接到该组件的生命周期，但也可以通过手动调用watchEffect返回的函数去取消侦听，如下我们改写上面的例子，在onBeforeMount生命周期钩子中停止侦听，效果就是组件一被挂载就停止侦听，但似乎这没什么意义，你完全可以在其它地方调用它。

import { reactive, watchEffect, onBeforeMount } from 'https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.js'

setup: function () {
    let data = reactive({
        count: 0
    })

    let stop = watchEffect(()=>{
        console.log('watchEffect',data.count)
    })

    onBeforeMount(stop)

    return { data }
}

优点

1. 对于这种只有一个依赖项的例子来说，watchEffect() 的好处相对较小。但是对于有多个依赖项的侦听器来说，使用 watchEffect() 可以消除手动维护依赖列表的负担。

2. 如果你需要侦听一个嵌套数据结构中的几个属性，watchEffect() 可能会比深度侦听器更有效，因为它将只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性。

3. watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁。

缺点

其响应性依赖关系会不那么明确