vue watch 使用详细

Vue.js 中的 watch 选项可以用来监听数据的变化并执行相应的操作。在 Vue 实例中，我们可以通过在选项中添加 watch 属性来设置监听器。其语法如下：

watch: {
  // 监听的数据
  dataToWatch: function(newVal, oldVal) {
    // 数据发生变化时要执行的操作
  }
}

其中，`dataToWatch` 是要监听的数据，`newVal` 是数据变化后的新值，`oldVal` 是数据变化前的旧值。当 `dataToWatch` 数据发生变化时，watch 选项中的函数就会被调用。

除了监听普通的数据外，watch 还可以监听对象、数组等数据类型。当监听的数据类型为对象时，我们可以使用函数的形式来监听对象中的某个属性的变化。其语法如下：

watch: {
  'obj.propToWatch': function(newVal, oldVal) {
    // propToWatch 属性发生变化时要执行的操作
  }
}

当监听的数据类型为数组时，我们可以使用 `deep: true` 选项来监听数组中元素的变化。其语法如下：

watch: {
  arrToWatch: {
    handler: function(newVal, oldVal) {
      // 数组元素发生变化时要执行的操作
    },
    deep: true
  }
}

在使用 watch 选项时，我们需要注意以下几点：

1. watch 选项只能用在 Vue 实例中。
2. watch 选项中的函数是异步执行的。
3. 使用 watch 选项时，应该避免在函数中修改监听的数据，以免造成死循环。如果需要修改数据，应该使用 computed 或 methods 选项。
4. watch 选项中的函数是有参数的，可以根据参数来判断变化的具体内容，从而做出相应的操作。

希望以上内容能够帮助你理解 Vue.js 中的 watch 选项。