主要总结一下在vue3中使用watch的几种常见的方式,在项目使用中依据不同的场景进行使用。
1. 监听一个变量
watch(obj, (newV, oldV) => {
// newV…
})
注意:
-
如果这个obj是 reactive,那么无法监听到oldV。
-
同样有个好处:reactive自动开启深度监听,不需要deep。
2. ref 变量的深度监听
watch(xxx, newV => {
// newV
}, {
deep: true,
immediate: true
})
3. 监听多个变量
watch([xx, yy], ([xnewV, ynewV], [xoldV, yoldV]) => {
// …
})
PS: 只要其中一个有修改,就监听到变化
4. 监听某个obj的某个属性
watch(()=> obj.xx, (newV, oldV) => {
// newV
})
或者
watch(() => obj, (newV, oldV) => {
// newV
})
5. watchEffect —— 自动监听变量,立即生效
它与watch的不同之处在于一下几点:
1)不需要声明监听的变量, 在watchEffect中,涉及到的变量就是监听的变量,它会自动监听。
2)初始化的时候会执行一次,自动获取依赖。
3)只能得到最新的值,无法获取到原值。
最后有几个小提示:
-
vue2 和 vue3 中的 新值和旧值的顺序不一样。在Vue2 中是 (oldV, newV), 而在Vue3 中是 (newV, oldV)
-
watch 和 watchEffect 可以在同一个页面使用多次,用于监听不同的值。
更多分享可以关注公众号:前端怪咖