vue watch深度监听

作者：风外听竹发布日期:2025-02-07 浏览:110

// 在 Vue 中，使用 watch 选项可以监听数据的变化。如果需要深度监听一个对象或数组的变化，可以设置 deep: true。

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John',
      age: 30
    }
  },
  watch: {
    // 深度监听 user 对象的变化
    user: {
      handler(newValue, oldValue) {
        console.log('user changed', newValue, oldValue);
      },
      deep: true // 开启深度监听
    }
  }
});

// 解释说明：
// 1. `watch` 选项用于监听 `data` 中的数据变化。
// 2. 当 `user` 对象中的任何属性（如 `name` 或 `age`）发生变化时，`handler` 函数会被触发。
// 3. `deep: true` 表示开启深度监听，这样不仅可以监听到对象本身的更改，还可以监听到对象内部属性的更改。

上一篇：vue启动

下一篇：vue checkbox