Vue3 响应式计算属性：使用 ref 或 reactive 实现

在 Vue3 中，可以使用'ref'或'reactive'函数将一个变化的计算属性变为响应式的。

使用'ref'函数

'ref'函数可以将一个普通的变量包装成响应式的引用对象，使该变量变为响应式的。

示例代码：

import { ref } from 'vue';

const count = ref(0);

// 计算属性
const doubleCount = computed(() => {
  return count.value * 2;
});

// 修改count的值，doubleCount会自动更新
count.value = 1;

使用'reactive'函数

'reactive'函数可以将一个普通的对象转换为响应式对象，使该对象的属性变为响应式的。

示例代码：

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  doubleCount: computed(() => {
    return state.count * 2;
  }),
});

// 修改count的值，doubleCount会自动更新
state.count = 1;

总结：

使用'ref'可以将一个变量变为响应式的引用对象。
使用'reactive'可以将一个对象变为响应式对象。
在计算属性中使用响应式的变量或对象，它们的值发生变化时，计算属性会自动更新。