Vue 3 中 computed 和 watch：深入探讨

2023-12-21 18:21:15

Vue 中的 computed 和 watch

在 Vue 中，computed 计算属性和 watch 侦听器是两种强大的工具，可以帮助我们跟踪和响应数据的变化。

computed 计算属性是一种特殊类型的属性，它允许我们基于其他属性的值计算一个新的值。与常规属性不同，computed 属性不会存储其值；相反，它会在每次访问时重新计算。这使得它们非常适合用于计算经常变化且依赖于其他属性的值。

在 Vue 3 中，computed 属性的语法与 Vue 2 中相同：

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

watch 侦听器是一种另一种用于跟踪和响应数据变化的工具。与 computed 属性不同，watch 侦听器不会重新计算值；相反，它们会在被侦听的属性发生变化时触发回调函数。这使得它们非常适合用于执行副作用，例如更新 DOM 或发出 API 请求。

在 Vue 3 中，watch 侦听器的语法略有变化：

watch: {
  firstName(newValue, oldValue) {
    // 在 firstName 属性发生变化时执行
  }
}

computed 和 watch 的改进

在 Vue 3 中，computed 计算属性和 watch 侦听器都得到了改进和增强：

更好的性能： 由于 Vue 3 的响应式系统进行了重新设计，computed 计算属性和 watch 侦听器的性能得到了显著提升。
更简单的语法： Vue 3 中的 computed 计算属性和 watch 侦听器的语法更加简洁，消除了 Vue 2 中的一些冗余。
watchEffect 侦听器： Vue 3 引入了 watchEffect 侦听器，它提供了一种更灵活的方式来响应数据的变化。watchEffect 侦听器与 watch 侦听器类似，但它们不依赖于特定的属性。这使得它们非常适合用于响应来自多个来源或异步操作的数据变化。