详解 Computed 与 Watch 的区别，让你轻松搞定响应式编程

2024-01-20 18:56:53

Computed vs. Watch：响应式编程中的两大法宝

在构建交互式和动态的 Vue.js 应用程序时，响应式编程扮演着至关重要的角色。响应式编程允许应用程序在数据发生变化时自动更新其界面。Vue.js 提供了两种强大的响应式工具：computed 和 watch。

什么是 Computed？

computed 是一种计算属性，它根据其他属性的值计算出一个新的属性。计算属性的值在依赖项发生变化时自动更新。例如，我们可以使用 computed 来创建一个 fullName 属性，它将 firstName 和 lastName 属性的值组合在一起。

代码示例：

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

什么是 Watch？

watch 是一种侦听器，它监听数据属性的变化并执行指定的回调函数。当监听的数据发生变化时，回调函数会被触发。例如，我们可以使用 watch 来监听 firstName 和 lastName 属性的变化，并在它们发生变化时更新 fullName 的值。

代码示例：

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

Computed 与 Watch 的区别

尽管 computed 和 watch 都用于响应数据变化，但它们的工作方式不同，各有其优缺点。

特性	Computed	Watch
计算方式	基于依赖项计算出新的属性	监听数据属性的变化
执行时机	依赖项发生变化时	数据发生变化时
作用范围	组件内部	组件内部和外部
性能	性能更好	性能较差
代码复杂度	代码更简单	代码更复杂