Vue3响应式系统：从computed到watch，揭秘数据侦听的奥秘

2022-12-04 19:37:00

响应式编程的利器：Vue3 中的 computed 和 watch

在现代 Web 开发中，响应式编程是构建动态且用户友好的应用程序的关键。Vue3 中的 computed 和 watch 属性提供了一种强大且灵活的方式，让你可以轻松响应数据的变化。

什么是 computed 属性？

computed 属性是一种计算属性，它允许你基于其他响应式属性计算值。这意味着，当这些其他属性发生变化时，computed 属性的值也会自动更新。

例如，假设你有两个响应式属性：firstName 和 lastName。你可以创建一个名为 fullName 的 computed 属性，它将这两者拼接在一起，如下所示：

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

在这个例子中，fullName 的值将始终是最新的，因为它是基于 firstName 和 lastName 的值计算得出的。无论 firstName 或 lastName 发生什么变化，fullName 都会自动反映这些变化。

什么是 watch 属性？

watch 属性允许你监听一个或多个响应式属性的变化，并在这些属性发生变化时执行特定的回调函数。这使得你可以对数据的变化做出反应，并更新 UI 或执行其他操作。

例如，假设你有响应式属性 count，它存储着用户的点击次数。你可以创建一个名为 clickCount 的 watch 属性，它会在 count 发生变化时执行一个回调函数，如下所示：

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      // 更新 UI，显示最新的点击次数
    }
  }
}

在这个例子中，clickCount 的回调函数会在 count 发生变化时执行。这个回调函数可以更新 UI，显示最新的点击次数。

computed 和 watch 的区别

虽然 computed 和 watch 都用于响应式编程，但它们之间存在着一些关键的区别：

computed 属性是计算属性，它基于其他响应式属性计算而来，而 watch 属性是侦听属性，它会监听一个或多个响应式属性的变化。
computed 属性的值始终是最新的，因为它是基于其他响应式属性计算得出的，而 watch 属性的回调函数只会在侦听的属性发生变化时执行。
computed 属性不能被直接修改，而 watch 属性的回调函数可以修改侦听的属性。

何时使用 computed

computed 属性最适合用于那些需要动态计算的值，例如总金额、平均值或日期格式化等。这些值是基于其他响应式属性计算得出的，因此 computed 属性确保它们始终是最新的。

何时使用 watch

watch 属性最适合用于那些需要对数据的变化做出反应的情况，例如表单验证、错误处理或异步数据加载等。这些情况需要你在数据发生变化时执行特定的操作，而 watch 属性提供了这种功能。

示例代码

为了更好地说明 computed 和 watch 的用法，这里提供一个示例代码：

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      count: 0
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  },
  watch: {
    count(newValue, oldValue) {
      // 更新 UI，显示最新的点击次数
    }
  }
}