Vue 3.0 系列文章
我们在上一章节介绍了响应式的原理，本文我们来探讨一下Vue 3.0的计算属性的实现原理。如果没有阅读过上一篇文章，建议请先阅读上一篇文章再来看本文，否则可能会有些迷糊。
使用方法
我们先来看看计算属性的用法：
代码说明： 使用
computedAPI 定义了一个计算属性computedCounter,它有一个get方法返回的值是counter这个响应式数据的平方，有一个set方法，可以对counter设置值；
实现的效果：counter的值变化，computedCounter的值也随之变化。
实现逻辑
computed API
我们先来看看computed是如何处理传入的参数的：
代码解释：
computed接收两种形式的传参，第一种是只传一个函数(例如：computed(() => counter.value * counter.value)),第二种是传入一个包含get和set两个函数的对象;- 第一种传参会将函数赋值给
getter方法，第二种传参会将get和set两个函数赋值给getter和setter方法；- 将
getter和setter方法用ComputedRefImpl封装起来；- 返回
ComputedRefImpl这个对象。
ComputedRefImpl 类
接下来我们看看ComputedRefImpl内部的实现：
代码解释：
- 构造函数中直接将传入的
setter赋值给_setter，利用ReactiveEffect将getter封装起来，然后将封装的结果赋值给effect。- 提供了get函数和set函数。
ComputedRefImpl##get
get函数的调用时机肯定是获取对应的值时候调用。
我们前面的例子就是渲染子树节点处理<p>{{ computedCounter }}</p>时需要获取对应的computedCounter的值。
- 调用get函数时候收集依赖，收集的是组件渲染函数
componentUpdateFn；- 第一次执行时
_dirty为true，所以会执行effect.run()。这个函数的执行后的逻辑是：
- 先将
effect压入effectStack栈中，并将activeEffect指向effect；- 执行
getter方法即counter.value * counter.value;- 当调用
counter.value时会触发counter的get函数，counter然后收集依赖，此时收集的依赖是effect函数。- 得到新值。
ComputedRefImpl##set 修改响应式数据触发的逻辑
set value(newValue: T) {
this._setter(newValue)
}
当修改counter的值时会分发依赖，由于counter有两个依赖：
computedCounter的effect函数：
if (!this._dirty) {
this._dirty = true
triggerRefValue(this)
}
执行的逻辑就是将_dirty设置为true，然后触发依赖也就是组件的副作用渲染函数。
注意：这个
_dirty设置为true是关键。
- 组件的副作用渲染函数：
组件的副作用渲染函数会触发组件的重新渲染，然后当获取computedCounter值的时候会调用get函数，此时_dirty设置为true, 和第一渲染一样，会调用effect.run()重新计算新值。
if (self._dirty) {
self._dirty = false
elf._value = self.effect.run()!
}
此时和第一次渲染一样，就进入了新的一轮依赖收集。循环往复，周而复始，直到程序结束。
总结
-
如果依赖的数据不变，计算属性不会重新计算，直接使用缓存的值，虽然这种性能的提升不明显，但是这种优化思维时刻需要具备的。
-
此外，如果不去获取计算属性，也不会去计算对应的值，具有延迟获取的特性。
