vuewatch监听

Vue中的watch可以用于监听对象中的属性的变化。具体来说，可以使用深度监听来监听对象中所有属性的变化。当对象中的属性发生变化时，会触发相应的处理函数。

在Vue中，可以使用watch来监听对象的属性变化。例如，在data中定义了一个对象school和一个对象room，并在watch中对它们进行监听。对于school对象，可以直接在handler中处理变化；而对于room对象，需要设置deep为true来开启深度监听，这样就可以监听到对象内部属性的变化。当对象属性发生变化时，相应的handler函数就会被调用。

另外，如果想要监听对象中的某个属性，可以使用第二种方法，在watch中直接指定对象的属性路径即可。例如，如果想要监听obj对象中的message属性的变化，可以在watch中写成"obj.message"，并定义相应的处理函数。

正常的watch监听函数中，可以通过参数传递当前值和旧值来处理属性的变化。如果想要深度监听对象或数组的变化，可以定义一个handler函数，并在函数中使用val和oldVal参数来获取变化后的值和变化前的值。

相关问题

vue watch监听

Vue.js 中的 watch 选项用于监听 Vue 实例上某个特定的数据变化。当被监听的数据发生变化时，会触发 watch 选项中的回调函数。

在 Vue 实例中使用 watch 选项，格式如下：

new Vue({
  data: {
    message: 'Hello'
  },
  watch: {
    message: function (newValue, oldValue) {
      console.log(newValue)
    }
  }
})

上面代码中，watch 选项中的键名为被监听的数据，键值为回调函数，当 message 数据发生变化时，会触发回调函数。

使用 watch 选项可以在数据发生变化时做一些特定的操作，比如更新 UI，发送请求等。

vue watch监听 props

在Vue中，可以使用watch选项来监听props的变化。通过在组件中定义一个watch对象，然后在该对象中定义与props名称相同的属性，即可实现props的监听。当props的值发生变化时，watch对象中对应的属性的处理函数会被触发。

例如，假设有一个组件的props为config，在watch对象中定义一个与props名称相同的属性：

watch: {
config(newVal, oldVal) {
// 处理函数
console.log(newVal, oldVal);
}
}

当config的值发生变化时，处理函数将被调用，并且会传入新值和旧值作为参数。