VUe3 computed 实现和原理
在 Vue 3 中，computed 是一个函数，它接受一个 getter 函数或一个具有 getter 和 setter 的对象，然后返回一个响应式的 ref 对象。
以下是一个使用 computed 的例子：
import { reactive, computed } from 'vue';
const state = reactive({
count: 0
});
const double = computed(() => state.count * 2);
console.log(double.value); // 0
state.count++;
console.log(double.value); // 2
在这个例子中，double 是一个计算属性，它的值是 state.count 的两倍。当 state.count 改变时，double 的值会自动更新。
computed 的实现原理是使用 Vue 的响应式系统来跟踪 getter 函数的依赖关系。当 getter 函数访问一个响应式值时，这个值就会被添加到 getter 的依赖列表中。然后，当这个值改变时，getter 就会被重新计算，计算属性的值就会被更新。
如果你传递一个具有 getter 和 setter 的对象给 computed，那么这个计算属性就会变成可写的。当你尝试修改这个计算属性的值时，setter 就会被调用。这可以用来实现更复杂的逻辑，例如验证或转换输入的值。
import { reactive, computed } from 'vue';
const state = reactive({
count: 0
});
const double = computed({
get: () => state.count * 2,
set: value => {
state.count = value / 2;
}
});
console.log(double.value); // 0
double.value = 4;
console.log(state.count); // 2
在这个例子中，当你尝试修改 double 的值时，setter 就会被调用，然后 state.count 就会被更新。
