嘿，各位靓仔靓女们，晚上好！ 今天咱们来聊聊Vue 3里面一个超级好用的东西：computed 属性。 别看它名字挺高大上，其实用起来简单到爆炸。 但是呢，简单归简单，里面的道道可不少。 今天咱们就一层一层地扒开它的皮，看看它到底是怎么工作的。
一、啥是 computed 属性？
先来个简单的热身。 啥是 computed 属性？ 简单来说，它就是一个根据现有数据计算出来的新数据。 就像是你在Excel里面写公式一样，输入数据变了，结果自动就变了。
举个栗子：
<template>
<div>
<p>价格：{{ price }}</p>
<p>数量：{{ quantity }}</p>
<p>总价：{{ totalPrice }}</p>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const price = ref(10);
const quantity = ref(2);
const totalPrice = computed(() => {
console.log('totalPrice被计算了！'); // 观察计算时机
return price.value * quantity.value;
});
return {
price,
quantity,
totalPrice,
};
},
};
</script>在这个例子里，totalPrice 就是一个 computed 属性。 它的值是由 price 和 quantity 这两个 ref 决定的。 只要 price 或者 quantity 变了，totalPrice 就会自动更新。
二、computed 的懒加载机制
重点来了！ computed 属性有个很重要的特性：懒加载。 啥意思呢？ 就是说，它只有在你真正用到它的时候才会去计算。 如果你定义了一个 computed 属性，但是页面上没有用到它，那它就不会执行计算函数。
回到上面的例子，如果你把 {{ totalPrice }} 从模板里删掉，你会发现 console.log('totalPrice被计算了！') 这句话根本不会执行。 这就是懒加载的威力！
为啥要有懒加载？
你想想，如果每个 computed 属性在组件初始化的时候都一股脑地计算一遍，那得多浪费资源啊！ 尤其是那些计算量很大的 computed 属性，简直就是性能杀手。 所以，懒加载就是为了避免不必要的计算，提高性能。
三、computed 的缓存机制
除了懒加载，computed 属性还有个更牛逼的特性：缓存。 也就是说，如果它的依赖（比如上面的 price 和 quantity）没有发生变化，那么它就会直接返回上次计算的结果，而不会重新计算。
继续看上面的例子，如果你只改变 price 的值，然后连续访问 totalPrice，你会发现 console.log('totalPrice被计算了！') 只会执行一次。 后面的访问都会直接从缓存里拿结果。
缓存的好处是啥？
当然是快啊！ 避免重复计算，大幅度提升性能。 想象一下，如果你的 computed 属性需要做很复杂的计算，比如处理大量数据，那缓存就显得尤为重要了。
什么时候缓存会失效？
当 computed 属性的依赖发生变化时，缓存就会失效，下次访问它的时候就会重新计算。 比如，你改变了 quantity 的值，那么下次访问 totalPrice 的时候，它就会重新计算。
四、computed 的依赖追踪原理
这才是 computed 属性最核心的部分！ 它是怎么知道自己的依赖变没变的呢？ 这就要说到 Vue 3 的响应式系统了。
简单来说，Vue 3 的响应式系统会追踪你在 computed 属性的计算函数里用到的所有 ref 或者 reactive 对象。 当这些对象的值发生变化时，响应式系统就会通知 computed 属性，告诉它 "嘿，你的依赖变了，该重新计算了！"
怎么实现的呢？
这就要涉及到 Vue 3 内部的一些机制，比如 track 和 trigger。
track(追踪)： 当computed属性第一次被访问的时候，会执行计算函数。 在计算函数执行过程中，Vue 3 的响应式系统会使用track函数来追踪所有用到的ref或者reactive对象。 简单来说，就是在这些依赖和computed属性之间建立了一种联系。trigger(触发)： 当某个ref或者reactive对象的值发生变化时，Vue 3 的响应式系统会使用trigger函数来通知所有依赖于它的computed属性。trigger函数会触发computed属性的更新。
用图来表示一下：
+-----------------+ track +-----------------+ trigger +-----------------+
| computed 属性 | <-------------- | 依赖 (ref/reactive) | --------------> | 响应式系统 |
+-----------------+ +-----------------+ +-----------------+代码层面简单模拟一下：
虽然不能完全还原 Vue 3 的源码，但我们可以用一些简单的代码来模拟一下这个过程。
// 模拟 ref
function ref(value) {
const dep = new Set(); // 存储依赖于这个 ref 的 computed 属性
return {
get value() {
track(this, 'value', dep); // 追踪依赖
return value;
},
set value(newValue) {
value = newValue;
trigger(this, 'value', dep); // 触发更新
},
};
}
// 模拟 computed
function computed(getter) {
let value;
let dirty = true; // 标记是否需要重新计算
let dep = new Set(); // 存储这个 computed 属性的依赖
const computedRef = {
get value() {
if (dirty) {
value = getter(); // 执行计算函数
dirty = false;
}
return value;
},
};
// 模拟 track 函数
function track(target, key, dep) {
activeEffect && dep.add(activeEffect); // 如果有 activeEffect，则添加到依赖集合中
}
// 模拟 trigger 函数
function trigger(target, key, dep) {
dep.forEach(effect => effect()); // 触发所有依赖的更新
}
// 模拟 effect 函数 (用于追踪 computed 属性)
let activeEffect = () => {
dirty = true; // 标记为需要重新计算
};
return computedRef;
}
// 例子
let price = ref(10);
let quantity = ref(2);
let totalPrice = computed(() => {
console.log("计算总价");
return price.value * quantity.value;
});
console.log(totalPrice.value); // 计算总价 20
console.log(totalPrice.value); // 20 (从缓存中获取)
price.value = 20; // 触发更新
console.log(totalPrice.value); // 计算总价 40
console.log(totalPrice.value); // 40 (从缓存中获取)这段代码只是一个简单的模拟，并没有包含 Vue 3 响应式系统的全部细节。 但是，它能让你对 computed 属性的依赖追踪原理有一个基本的了解。
五、computed 属性的 getter 和 setter
除了基本的用法，computed 属性还可以设置 getter 和 setter。 啥意思呢？ 就是说，你可以控制 computed 属性的读取和写入行为。
<template>
<div>
<p>全名：{{ fullName }}</p>
<button @click="setFullName">修改全名</button>
</div>
</template>
<script>
import { ref, computed } from 'vue';
export default {
setup() {
const firstName = ref('张');
const lastName = ref('三');
const fullName = computed({
get: () => {
console.log('获取全名');
return firstName.value + ' ' + lastName.value;
},
set: (newValue) => {
console.log('设置全名', newValue);
const names = newValue.split(' ');
firstName.value = names[0];
lastName.value = names[1];
},
});
const setFullName = () => {
fullName.value = '李 四'; // 调用 setter
};
return {
firstName,
lastName,
fullName,
setFullName,
};
},
};
</script>在这个例子里，fullName 有一个 getter 和一个 setter。
getter： 当你访问fullName.value的时候，就会执行getter函数，计算并返回全名。setter： 当你设置fullName.value的时候，就会执行setter函数，把新的全名拆分成firstName和lastName。
setter 有啥用？
setter 让你能够双向绑定 computed 属性。 也就是说，你可以通过修改 computed 属性的值来影响其他数据。
六、computed 属性的源码分析 (简化版)
虽然直接分析 Vue 3 的源码比较复杂，但我们可以从一些关键点入手，理解 computed 属性的实现思路。
以下是一个简化的 computed 函数的实现：
function computed(getterOrOptions) {
let getter, setter;
if (typeof getterOrOptions === 'function') {
getter = getterOrOptions;
setter = () => {
console.warn('Write operation failed: computed value is readonly');
};
} else {
getter = getterOrOptions.get;
setter = getterOrOptions.set;
}
let value;
let dirty = true;
let effect;
const computedRef = {
get value() {
if (dirty) {
value = effect.run(); // 执行 effect，计算值并追踪依赖
dirty = false;
}
return value;
},
set value(newValue) {
setter(newValue);
},
};
effect = new ReactiveEffect(getter, () => {
if (!dirty) {
dirty = true;
// 触发依赖更新，通知其他依赖于这个 computed 属性的 effect
trigger(computedRef, 'value'); // 这里需要一个 trigger 函数，用于触发更新
}
});
return computedRef;
}
// 模拟 ReactiveEffect
class ReactiveEffect {
constructor(fn, scheduler) {
this.fn = fn;
this.scheduler = scheduler;
this.active = true;
this.deps = []; // 存储依赖
}
run() {
if (!this.active) {
return this.fn();
}
activeEffect = this; // 设置当前 activeEffect
cleanupEffect(this); // 清理之前的依赖
const result = this.fn(); // 执行函数，触发依赖追踪
activeEffect = undefined; // 清空 activeEffect
return result;
}
stop() {
if (this.active) {
cleanupEffect(this);
this.active = false;
}
}
}
function cleanupEffect(effect) {
effect.deps.forEach(dep => {
dep.delete(effect); // 从依赖集合中移除
});
effect.deps = [];
}这段代码虽然简化了很多细节，但它体现了 computed 属性的核心思想：
ReactiveEffect：computed属性使用ReactiveEffect来追踪依赖，并在依赖变化时触发更新。dirty标记：dirty标记用于判断是否需要重新计算。trigger函数：trigger函数用于触发依赖更新，通知其他依赖于这个computed属性的 effect。
七、总结
好了，今天咱们就聊到这里。 总结一下：
computed属性是一个根据现有数据计算出来的新数据。- 它有懒加载和缓存机制，可以提高性能。
- 它通过依赖追踪来知道自己的依赖变没变。
- 它可以设置
getter和setter，实现双向绑定。
希望今天的讲解能让你对 computed 属性有更深入的了解。 下次再见！