Vue中的watch和computed详解，深入解析响应式数据的本质

2023-12-24 16:19:24

Vue.js中的数据绑定

在Vue.js中，数据绑定是实现响应式用户界面的关键。数据绑定允许您在Vue实例的数据和HTML模板之间建立连接，当数据发生变化时，模板也会相应地更新。这使得您可以轻松地构建出能够实时响应用户交互的应用程序。

watch和computed概述

在Vue.js中，watch和computed是两个用于处理响应式数据的核心特性。它们都允许您在数据发生变化时执行某些操作，但它们的工作方式略有不同。

watch：watch允许您监视一个或多个数据属性，当这些属性发生变化时，您可以执行相应的处理函数。watch非常适合处理需要立即响应数据变化的情况，例如，当用户输入表单时，您可能希望立即更新表单中的数据。
computed：computed允许您定义计算属性，这些属性的值是根据其他数据属性计算得来的。computed非常适合处理需要根据其他数据属性计算而来的数据，例如，当您需要计算用户输入的表单数据的总和时，您可以使用computed来完成。

watch的用法

使用watch非常简单，您只需要在Vue实例中定义一个watch对象，并在其中指定要监视的数据属性和相应的处理函数即可。例如，以下代码将监视data中名为“message”的数据属性，当该属性发生变化时，它将执行处理函数console.log()：

export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('Message changed from "%s" to "%s"', oldValue, newValue)
    }
  }
}

computed的用法

使用computed也同样简单，您只需要在Vue实例中定义一个computed对象，并在其中指定计算属性的名称和计算函数即可。例如，以下代码将定义一个名为“fullName”的计算属性，该属性的值是data中名为“firstName”和“lastName”的数据属性的连接：

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}

watch和computed的比较

watch和computed都是非常有用的特性，但它们也有一些关键的区别。以下表格总结了它们的异同：

特性	watch	computed
目的	监视数据属性的变化	计算属性的值
执行时机	数据属性发生变化时	计算属性的值被访问时
缓存	没有	有
性能	性能开销较小	性能开销较大