vue2提供了watch选项和实例接口$watch来监听数据变化，vue3又新增了watchEffect 监听器。

  1. import { watchEffect, ref } from 'vue'
  2.     setup () {
  3.     const userID = ref(0)
  5.     watchEffect(() => console.log(userID))
  6.     // -> logs 0
  8.     setTimeout(() => {
  9.       userID.value = 1
  10.       // -> logs 1
  11.     }, 1000)
  14.     return {
  15.       userID
  16.     }
  17.  }

停止监听

当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。

在一些情况下，也可以显式调用返回值以停止侦听：

  1. const stop = watchEffect(() => {
  2.   /* ... */
  3. })
  5. // later
  6. stop()

watchEffect 与 watch 有什么不同？

  • watchEffect 不需要手动指定监听的属性，他会自动的收集依赖， 只要我们回调中引用到了 响应式的属性， 那么当这些属性变更的时候，这个回调都会执行，而 watch 只能监听指定的属性而做出变更(v3开始可以同时指定多个)。
  • 第二点就是 watch 可以获取到新值与旧值（更新前的值），而 watchEffect 只能得到变化后的值。
  • 第三点是 watchEffect 如果存在的话，在组件初始化的时候就会执行一次用以收集依赖（与computed同理），而后收集到的依赖发生变化，这个回调才会再次执行，而 watch 不需要，因为他一开始就指定了依赖。