watchEffect 监听器

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

import { watchEffect, ref } from 'vue'
    setup () {
    const userID = ref(0)
    watchEffect(() => console.log(userID))
    // -> logs 0
    setTimeout(() => {
      userID.value = 1
      // -> logs 1
    }, 1000)
    return {
      userID
    }
 }

停止监听

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

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

const stop = watchEffect(() => {
  /* ... */
})
// later
stop()

watchEffect 与 watch 有什么不同？

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