Vue.js的computed和watch属性详解

作者：绝缘体.. 发布： 2018-05-04 08:04 分类：未分类阅读：抢沙发

在Vue.js中，computed和watch是两个重要的属性，它们用于监听数据的变化，实现响应式的界面更新。本文将详细介绍computed和watch的使用以及它们的区别。

computed属性

computed属性是一种计算属性，它是根据现有的数据派生出来的新的数据。computed属性可以根据它所依赖的数据自动更新，只要依赖的数据发生变化，computed属性就会重新计算。

在Vue实例的computed选项中定义computed属性。例如，我们有一个对象person，它有firstName和lastName两个属性，我们想要根据这两个属性的值计算出fullName属性，可以这样定义computed属性：

computed: {
  fullName() {
    return this.person.firstName + ' ' + this.person.lastName;
  }
}

在模板中使用computed属性的时候，可以像使用普通属性一样使用它：

<p>{{ fullName }}</p>

计算属性的一个重要特点是它们是缓存的，也就是说在依赖的数据不变的情况下，多次读取computed属性，只会执行一次计算。

如果computed属性所依赖的数据发生变化，那么computed属性会重新计算。Vue.js会智能地判断computed属性的依赖关系，只重新计算相关的computed属性，而不是重新计算所有的computed属性。

watch属性用于监听数据的变化，并在数据发生变化后执行相应的操作。与computed属性不同，watch属性用于监听一个或多个具体的数据，而不是派生出新的数据。

在Vue实例的watch选项中定义watch属性。例如，我们有一个数据count，我们希望在count发生变化后执行一些操作，可以这样定义watch属性：

watch: {
  count(newValue, oldValue) {
    // 在count发生变化后执行的操作
  }
}

watch属性的值是一个对象，对象的键是要监听的数据的名称，值是一个函数，用于处理数据变化后的操作。函数接收两个参数，变化后的值和变化前的值。

默认情况下，Vue.js只会监听这个对象的引用的变化。如果想要深度监听对象的属性，可以使用deep选项：

watch: {
  obj: {
    handler(newValue, oldValue) {
      // obj对象发生变化后执行的操作
    },
    deep: true
  }
}

默认情况下，Vue.js在监听到数据变化后会稍等一段时间（默认是异步的）再执行watch属性中的操作。如果希望在数据变化后立即执行操作，可以使用immediate选项：

watch: {
  count: {
    handler(newValue, oldValue) {
      // 在count发生变化后立即执行的操作
    },
    immediate: true
  }
}

总结一下，computed属性适用于计算派生的数据，而watch属性适用于监听具体数据的变化。根据需求选择使用computed还是watch，可以让我们更好地实现响应式的界面更新。

以上就是对Vue.js的computed和watch属性的详细介绍。希望本文能对你理解这两个属性有所帮助。谢谢阅读！

本文来自极简博客，作者：智慧探索者，转载请注明原文链接：Vue.js的computed和watch属性详解

打赏