Vue.js watch 属性详解：监听数据变化与深度监听

Vue.js 的 watch 属性用于监听 Vue 实例中的数据变化。当指定的数据发生变化时，会触发 watch 的回调函数。watch 属性通常用于监听数据的变化，然后执行一些逻辑操作。

基本语法

watch: {
  // 监听的数据
  'dataToWatch': function(newVal, oldVal) {
    // 数据变化时的回调函数
    // newVal 为新值，oldVal 为旧值
    // 执行一些操作
  }
}

监听多个数据

在 watch 属性中可以监听多个数据，并指定不同的回调函数。当监听的数据发生变化时，会分别触发对应的回调函数。

对象写法

watch: {
  'dataToWatch': {
    handler: function(newVal, oldVal) {
      // 数据变化时的回调函数
      // 执行一些操作
    },
    deep: true // 深度监听
  }
}

深度监听

watch: {
  'dataToWatch': {
    handler: function(newVal, oldVal) {
      // 数据变化时的回调函数
      // 执行一些操作
    },
    deep: true // 深度监听
  }
}

当使用深度监听时，Vue 会递归监听对象内部的所有属性。当对象内部的属性发生变化时，也会触发 watch 的回调函数。

监听计算属性和方法返回值

除了基本的数据监听，watch 还可以监听计算属性和方法的返回值。这样，当计算属性或方法的返回值发生变化时，也会触发 watch 的回调函数。

总结

Vue.js 的 watch 属性用于监听数据的变化，并在数据变化时执行回调函数。可以监听基本的数据、计算属性、方法返回值，以及使用对象写法和深度监听。