watch的使用 vue2,vue3使用对比

在vue2的使用

  watch: {
        // 默认情况下我们的监听器只会针对监听的数据本身的改变(内部发生的改变是不能监听)
        
        // info(newInfo, oldInfo) {
        //   console.log("newValue:", newInfo, "oldValue:", oldInfo);
        // }

        // 深度监听/立即执行(一定会执行一次)
        info: {
          handler: function(newInfo, oldInfo) {
            console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name);
          },
          deep: true, // 深度监听
          // immediate: true // 立即执行
        }
}

深度监听只需要在后面加上 deep
立即执行也只需要添加 immediate

在vue3的使用

$watch

这里粘贴官网的案例 我添加一些注释

  //第一个参数为变量,第二个参数为回调，第三个参数为深度监听，立即执行等

   // 一般用于监听基本数据类型的时候，引用数据类型直接写不会进行深度监听
    
    this.$watch('a', (newVal, oldVal) => {
      // 做点什么
    })

    // 监听引用数据类型  第一个参数为函数 可达到深度监听的效果 
    this.$watch(
      () => this.c.d,
      (newVal, oldVal) => {
        // 做点什么
      }
    )

    // 用于监视复杂表达式的函数
    this.$watch(
      // 表达式 `this.a + this.b` 每次得出一个不同的结果时
      // 处理函数都会被调用。
      // 这就像监听一个未被定义的计算属性
      () => this.a + this.b,
      (newVal, oldVal) => {
        // 做点什么
      }
    )

所以在监听对象等复杂数据类型的时候，我们经常采用第二种方式，写为函数形式。当然vue2的写法也可以沿用

深度监听，和立即执行的延用

  vm.$watch('someObject', callback, {
    deep: true,//深度监听
    immediate: true//立即执行
  })

watch监听多个数据源

第一个参数可以是一个数组，监听多个数据源

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

$watch 返回

$watch 返回一个取消侦听函数，用来停止触发回调

const app = createApp({
  data() {
    return {
      a: 1
    }
  }
})

const vm = app.mount('#app')

const unwatch = vm.$watch('a', cb)
// later, teardown the watcher
unwatch()

在带有 immediate 选项时，你不能在第一次回调时取消侦听。 因为第一次进行的时候，还没有返回

// 这会导致报错
const unwatch = vm.$watch(
  'value',
  function() {
    doSomething()
    unwatch()
  },
  { immediate: true }
)
 
//在回调内部使用的时候，需要判断一下该函数是否存在
let unwatch = null

unwatch = vm.$watch(
  'value',
  function() {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)

watchEffect

watchEffect 监听会立即执行
类似于watch添加immediate的效果，使用起来更加简单方便

  watchEffect(() => console.log(count.value))

自己总结的，请大佬指教