理解vue中$watch使用

侦听组件实例上的响应式 property 或函数计算结果的变化。回调函数得到的参数为新值和旧值。我们只能将顶层的 data、prop 或 computed property 名作为字符串传递。对于更复杂的表达式，用一个函数取代。

假设 data 定义的数据如下：

data() {
  return {
    a: 1,
    b: 2,
    c: {
      d: 3,
      e: 4
    }
  }
},

单个的顶层属性，第一个参数是字符串，第二个参数是函数。

created() {
  // 顶层属性
  this.$watch('a', (newVal, oldVal) => {
    // 做点什么
  })
}

包含嵌套的对象里面的属性，两个参数都必须是函数形式。

created() {
  // 用于监视单个嵌套属性
  this.$watch(
    () => this.c.d,
    (newVal, oldVal) => {
      // 做点什么
    }
  )
}

如果使用的是 vue3 请使用上面的写法，如果使用的是 vue2 可以使用简单的键路径。

created() {
  // 键路径
  this.$watch('c.d', (newVal, oldVal) => {
    // 做点什么
  })
}

对于更复杂的表达式，用一个函数取代。

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

当侦听的值是一个对象或者数组时，对其属性或元素的任何更改都不会触发侦听器，因为它们引用相同的对象/数组：

const app = Vue.createApp({
  data() {
    return {
      article: {
        text: 'Vue is awesome!'
      },
      comments: ['Indeed!', 'I agree']
    }
  },
  created() {
    this.$watch('article', () => {
      console.log('Article changed!')
    })

    this.$watch('comments', () => {
      console.log('Comments changed!')
    })
  },
  methods: {
    // 这些方法不会触发侦听器，因为我们只更改了Object/Array的一个property，
    // 不是对象/数组本身
    changeArticleText() {
      this.article.text = 'Vue 3 is awesome'
    },
    addComment() {
      this.comments.push('New comment')
    },

    // 这些方法将触发侦听器，因为我们完全替换了对象/数组
    changeWholeArticle() {
      this.article = { text: 'Vue 3 is awesome' }
    },
    clearComments() {
      this.comments = []
    }
  }
})

为了发现对象内部值的变化，可以在选项参数中指定 deep: true。在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

created() {
  // 顶层属性
  this.$watch('c', (newVal, oldVal) => {
    // 做点什么
  }, { deep: true, immediate: true })
}
// this.c.d = '6'
// this.c.e = '7'

注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

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

命令式的 $watch API，和 options API 中的 watch 选项类似，但是和 composition API 的 watch 还是有点区别的。因为后者可以使用数组来同时侦听多个源：

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

需要在数据变化时执行异步或开销较大的操作时，请使用 watch 处理。