Vue Deep Watch Example

创作时间:

作者:

@小白创作中心

Vue Deep Watch Example

引用

来源

https://worktile.com/kb/p/3672924

Vue.js中的深度监听是一个非常实用的功能，它允许开发者监控对象内部属性的变化，而不仅仅是对象本身的变化。本文将详细介绍如何使用深度监听，并通过具体的代码示例帮助读者理解其应用场景和注意事项。

一、使用深度监听（deep:true）

在Vue.js中，使用深度监听可以监视对象内部属性的变化。这对于处理嵌套对象或数组特别有用。要实现这一点，可以在Vue实例的watch选项中将deep属性设置为true。例如：

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John',
      age: 30
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('User object changed:', newVal);
      },
      deep: true
    }
  }
});

在这个例子中，无论user对象的哪个属性发生变化，handler函数都会被触发。

二、在监听器内手动赋值

深度监听触发后，可以在handler函数内部对对象进行手动赋值。这样可以确保Vue响应式系统正确地处理数据变化。例如：

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John',
      age: 30
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        // 进行某些操作，然后赋值
        this.user.name = 'Doe';
        console.log('User object changed:', newVal);
      },
      deep: true
    }
  }
});

在这个例子中，当user对象的属性发生变化时，name属性会被重新赋值为'Doe'。

三、确保对象引用不变

在Vue中，响应式系统依赖于对象的引用。当引用发生变化时，Vue会认为是一个新的对象。因此，在深度监听时，尽量不要改变对象的引用，而是直接修改对象的属性。例如：

new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John',
      age: 30
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        // 避免直接替换对象引用
        // this.user = { name: 'Doe', age: 30 };
        // 直接修改属性
        this.user.name = 'Doe';
      },
      deep: true
    }
  }
});

如果直接替换user对象的引用，可能会导致一些意外行为。例如：

// 错误示例
this.user = { name: 'Doe', age: 30 };

这样做会破坏Vue的响应式系统，导致无法正确地监听到对象内部的变化。

四、实例说明

以下是一个完整的实例，展示了如何使用深度监听，并在监听器内正确地赋值：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Deep Watch Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>User Name: {{ user.name }}</p>
    <p>User Age: {{ user.age }}</p>
    <button @click="updateUser">Update User</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        user: {
          name: 'John',
          age: 30
        }
      },
      watch: {
        user: {
          handler(newVal, oldVal) {
            console.log('User object changed:', newVal);
          },
          deep: true
        }
      },
      methods: {
        updateUser() {
          this.user.name = 'Doe';
          this.user.age = 31;
        }
      }
    });
  </script>
</body>
</html>

在这个例子中，当点击“Update User”按钮时，user对象的name和age属性都会被更新，并且深度监听器会记录这些变化。