用 Vue3 做一个响应式系统，介绍 computed

前言

在上一篇文章中，我们介绍了如何使用 Vue3 实现一个响应式系统，包括基本原理和实现细节。在此基础上，本文将继续深入探讨响应式系统的实现，重点介绍 computed 特性及其用法。

computed 的概念

computed 是 Vue3 中一个非常重要的特性，它允许我们在组件中定义计算属性，这些属性的值是基于其他属性计算得来的。计算属性与普通属性不同，只有在被访问时才会计算其值，并且在依赖的属性发生变化时，计算属性的值也会自动更新。

computed 的语法

computed 属性的语法如下：

computed: {
  computedProperty: {
    // 计算属性的 getter 函数
    get: function() {
      // 计算属性的值
    },
    // 计算属性的 setter 函数（可选）
    set: function(newValue) {
      // 当计算属性的值被修改时触发
    }
  }
}

其中，computedProperty 是计算属性的名称，get 函数是计算属性的 getter 函数，它返回计算属性的值。set 函数是计算属性的 setter 函数，它允许我们修改计算属性的值。

computed 的使用场景

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

• 计算两个或多个属性的和、差、积、商等。
• 根据某个属性的值动态生成另一个属性的值。
• 根据某个属性的值过滤或排序数据。
• 根据某个属性的值显示或隐藏组件。

computed 的实现原理

computed 属性的实现原理很简单，它本质上就是一个缓存机制。当我们访问一个计算属性时，Vue3 会先检查该计算属性的值是否已经缓存过。如果已经缓存过，则直接返回缓存值。如果尚未缓存过，则计算该计算属性的值，并将其缓存起来。

computed 的示例

为了更好地理解 computed 的用法，我们来看几个示例。

// 计算两个属性的和
computed: {
  sum: {
    get: function() {
      return this.a + this.b;
    }
  }
}

// 根据某个属性的值动态生成另一个属性的值
computed: {
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}

// 根据某个属性的值过滤数据
computed: {
  filteredData: {
    get: function() {
      return this.data.filter(item => item.type === 'A');
    }
  }
}

// 根据某个属性的值显示或隐藏组件
computed: {
  isVisible: {
    get: function() {
      return this.show ? true : false;
    }
  }
}

总结

computed 是 Vue3 中一个非常重要的特性，它允许我们在组件中定义计算属性，这些属性的值是基于其他属性计算得来的。computed 属性的语法很简单，它可以用于各种场景，例如计算两个或多个属性的和、差、积、商等。根据某个属性的值动态生成另一个属性的值。根据某个属性的值过滤或排序数据。根据某个属性的值显示或隐藏组件。computed 属性的实现原理很简单，它本质上就是一个缓存机制。当我们访问一个计算属性时，Vue3 会先检查该计算属性的值是否已经缓存过。如果已经缓存过，则直接返回缓存值。如果尚未缓存过，则计算该计算属性的值，并将其缓存起来。