vue 中 watch 和 watchEffect 区别

vue 中 watch 和 watchEffect 区别

* watch 需要先指明需要侦听的数据源，watchEffect 不需要，只要传入的函数带有依赖就会自动追踪。
* watchEffect 会立即执行传入的函数。watch 不会立即执行，当数据源发生变化时才会触发传入 watch 的函数，不过可设置 immediate 初始化时执行
*  watch 可获取侦听的数据源的先前值，watchEffect 不可以

 watch(
        // 第一个参数，确定要监听哪个属性
        () => state.age,
        // 第二个参数，回调函数
        (newAge, oldAge) => {
            console.log('state watch', newAge, oldAge)
        },

        // 第三个参数，配置项
        {
            immediate: true, // 初始化之前就监听，可选
            // deep: true // 深度监听
        }
    )

    watchEffect(() => {
        // 初始化时，一定会执行一次（收集要监听的数据）
        console.log('hello watchEffect')
    })
    watchEffect(() => {
        console.log('state.name', state.name)
    })