vue3邂逅--watch雨watchEffect的异同_vue3 上升的雨-CSDN博客

本文链接：https://blog.csdn.net/qq_45257418/article/details/121907107

本文详细对比了Vue.js中watch和watchEffect的使用。watch具有惰性，需设置immediate才能立即执行，支持深度监听和多值监听，能获取变化前后的值。而watchEffect在页面加载时即执行，自动感知依赖，不提供变化前的值，可通过setTimeout控制停止。了解两者的差异有助于优化Vue应用的响应式逻辑。

摘要由CSDN通过智能技术生成

watch雨watchEffect的异同

1、两者都可在setup方法中应用：
2、watch：
	（1）监听时具有惰性(lazy)，即值或某个变量被第一次绑定的时候，不会执行watch，需要值发生改变才会执行，但是我们可以手动配置immediate为true，去除该惰性
     watch(num，(newVal,oldVal) => {  //可单独或监听多个数据对象变化watch([num，user.age](newVal,oldVal)
        console.log('新值'：newVal);
        console.log('原值':oldVal);
        console.log('num发生了变化');
        immediate = true；
        //deep = true
    })
	（2）当需要监听对象里面的属性值发生变化时，需要设置deep为ture进行深度监听
    （3）可以拿到参数变化前后的值
    （4）可以监听多个值的变化，由一个监听器承载
3、watchEffect:
	（1）它会立即执行函数，在页面加载时主动执行一次来收集变化值的依赖
    （2）不需要传递监听内容，会自我感知代码依赖，只需一个回调函数
    watchEffect(() => {
        console.log(user.age); //监听user.age的改变
	  console.log('user.age发生变化时，触发watchEffect函数')//当user.age发生改变时，会触发执行此函数
    })
	（3）它不能获取变化前的值
    （4）可以通过setTimeout设置监听停止的时间
    
    详解见转载https://www.jianshu.com/p/ccf5899ccad9