从原理上详解 computed 和 watch，再也不用傻傻分不清楚了

Vue 的 computed、watch 的实现

computed 和 watch 都是 Vue.js 中用于响应式数据的两个重要特性。computed 用于计算属性值，而 watch 用于监听属性的变化。这两个特性可以帮助我们构建出更加灵活、响应迅速的 Vue.js 组件。

computed

computed 计算属性是一个函数，它返回一个值。这个值可以是任何东西，例如：字符串、数字、数组、对象等。computed 属性的值是根据其依赖项来计算的。当依赖项发生变化时，computed 属性的值也会随之更新。

export default {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}

在这个例子中，fullName 是一个 computed 属性。它的值是 firstName 和 lastName 的连接。当 firstName 或 lastName 的值发生变化时，fullName 的值也会随之更新。

computed 属性可以用于各种场景，例如：

• 计算一个组件的总价格
• 格式化一个日期
• 过滤一个数组
• 创建一个新的对象

watch

watch 监听属性是一个函数，它接收两个参数：一个要监听的属性和一个回调函数。当属性的值发生变化时，回调函数就会被调用。

export default {
  watch: {
    firstName(newValue, oldValue) {
      console.log('firstName changed from', oldValue, 'to', newValue)
    }
  }
}

在这个例子中，watch 监听 firstName 属性的变化。当 firstName 的值发生变化时，console.log() 函数就会被调用，并输出 firstName 的旧值和新值。

watch 属性可以用于各种场景，例如：

• 监听一个组件的属性是否发生变化
• 在属性发生变化时触发一个事件
• 在属性发生变化时更新组件的状态

computed 和 watch 的异同

computed 和 watch 都是用于响应式数据的特性，但它们之间也有着一些差异。

• computed 属性是一个函数，它返回一个值。watch 监听属性是一个函数，它接收两个参数：一个要监听的属性和一个回调函数。
• computed 属性的值是根据其依赖项来计算的。watch 监听属性的值是根据属性本身来计算的。
• computed 属性的值是惰性的，这意味着它只在需要的时候才计算。watch 监听属性的值是主动的，这意味着它会在属性发生变化时立即计算。

何时使用 computed？

在以下情况下，您可以使用 computed 属性：

• 您需要计算一个属性的值，而这个值依赖于其他属性的值。
• 您需要格式化一个值，例如：将日期格式化为 "YYYY-MM-DD"。
• 您需要过滤一个数组，例如：过滤出数组中的所有奇数。
• 您需要创建一个新的对象，例如：创建一个包含用户信息的对象。

何时使用 watch？

在以下情况下，您可以使用 watch 监听属性：

• 您需要监听一个属性是否发生变化。
• 您需要在属性发生变化时触发一个事件。
• 您需要在属性发生变化时更新组件的状态。

性能优化

computed 属性和 watch 监听属性都会对组件的性能产生影响。

• computed 属性的值是惰性的，这意味着它只在需要的时候才计算。这可以减少不必要的计算，从而提高组件的性能。
• watch 监听属性的值是主动的，这意味着它会在属性发生变化时立即计算。这可能会导致不必要的计算，从而降低组件的性能。

为了优化组件的性能，您应该尽量减少 computed 属性和 watch 监听属性的使用。如果您必须使用它们，那么您应该尽量减少它们计算的次数。