vue3中watch和watchEffect的区别

相同点：都是监听器

不同：

watch

• 具有一定的惰性lazy ：第一次页面展示的时候不会执行，只有数据变化的时候才会执行
• 参数可以拿到当前值和原始值
• 需要传递要监听的内容
• 可以监听多个数据的变化（用数组），用一个监听器承载

• watch也可以变为非惰性的 ,立即执行的 添加第三个参数 immediate: true

• watch('监听的属性(ref直接写,reactive用函数)',(newVal.oldVal)=>{ },{immediate:true,deep:true})

watchEffect

1. 立即执行，没有惰性，页面的首次加载就会执行。
2. 没有过多的参数，只有一个回调函数 watchEffect(()=>{}）
3. 自动检测内部代码，代码中有依赖就会执行
4. 不需要传递要监听的内容，会自动感知代码依赖
5. 无法获取到原值，只能得到变化后的值
6. 异步的操作放在这里会更加合适