相同点:都是监听器
不同:
watch
- 具有一定的惰性lazy :第一次页面展示的时候不会执行,只有数据变化的时候才会执行
- 参数可以拿到当前值和原始值
- 需要传递要监听的内容
- 可以监听多个数据的变化(用数组),用一个监听器承载
-
watch也可以变为非惰性的 ,立即执行的 添加第三个参数 immediate: true
- watch('监听的属性(ref直接写,reactive用函数)',(newVal.oldVal)=>{ },{immediate:true,deep:true})
watchEffect
- 立即执行,没有惰性,页面的首次加载就会执行。
- 没有过多的参数,只有一个回调函数 watchEffect(()=>{})
- 自动检测内部代码,代码中有依赖就会执行
- 不需要传递要监听的内容,会自动感知代码依赖
- 无法获取到原值,只能得到变化后的值
- 异步的操作放在这里会更加合适