从零开始构建 Vue 3 之 computed 计算属性

2023-12-28 06:47:21

大家好，我是[你的名字]，一名热衷于技术写作的博主。今天，我们踏上了构建一个迷你 Vue 框架的激动人心之旅。在上一章中，我们探索了响应式系统的基础知识。现在，我们将深入研究 computed 计算属性，这是响应式系统中另一个不可或缺的特性。

何为 computed 计算属性？

computed 计算属性是一个神奇的功能，它允许您定义一个基于其他响应式数据的派生数据。当基础数据发生更改时，计算属性也会自动更新，从而为您提供最新派生数据的值。换句话说，computed 属性就像一个自动计算器，它始终保持最新状态，而无需手动干预。

实现 computed 计算属性

在 Vue 3 中，可以使用 computed() 函数来定义 computed 计算属性。该函数接受一个工厂函数，该函数返回派生数据的计算结果。让我们通过一个例子来理解它：

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
  },
});

在这个例子中，我们定义了一个名为 fullName 的 computed 属性，它计算并返回了 firstName 和 lastName 的连接值。

理解 computed 计算属性

computed 计算属性有一些重要的特性需要理解：

缓存： computed 计算属性是缓存的，这意味着它只会在其依赖的数据发生更改时重新计算。这提高了性能，因为避免了不必要的重新计算。
依赖： computed 计算属性可以依赖于其他 computed 计算属性或响应式数据。
getter 和 setter： computed 计算属性具有一个 getter 函数，它返回计算后的值，以及一个可选的 setter 函数，它允许更新计算后的值。