vue3 watch 和 watchEffect的使用

本文章仅供个人学习记录所用

监听 ref 类型

第一个参数是响应式对象，第二个参数是回调函数

const a = ref(0)  
watch(a, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

监听 reactive 类型

首先采用 ref 的那种方式，我们会发现报错

const data = reactive({
  count: 0
})

watch(data.count, (newVal, oldVal) => { // 错误写法
  console.log(newVal, oldVal)
})

错误信息

[Vue warn]: Invalid watch source: 0** A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. **

所以我们根据上述的报错信息，将这个参数改成一个 function的形式即可

const data = reactive({
  count: 0
})

watch(() => data.count, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

同时监听多个

watch 第一个参数可以使用数组的形式

watch([a, () => data.count], (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

watchEffect的使用

// watchEffect 监听
watchEffect(() => {
  console.log(a.value, data.count) // ref  类型的需要加.value
})

watch和watchEffect的特性对比

watch的特性

• 首次加载不会监听，只会被监听数据发生变化时才监听到。（惰性）
• 可以拿到新的值以前的值
• 可以同时监听多个数据的变化

watchEffect的特性

• 首次加载就会监听
• 只能拿到最新的值
• 不需要指定监听的数据，组件初始化的时候就会执行一次用以收集依赖，而后收集到的依赖发生变化，这个回调才会再次执行

高级用法

他们的高级用法等后面应用的时候单独再记录下

完整案例代码体验