vue3在reactive里面中怎么用computed

在 Vue 3 中，我们可以使用 `computed` 函数来创建计算属性。计算属性是一种根据其他属性计算得出值的属性，可以将其看作是一个自动更新的属性。

在 `reactive` 中使用 `computed`，我们可以先使用 `ref` 函数来创建一个响应式对象，然后再使用 `computed` 函数来创建计算属性，如下所示：

import { reactive, computed, ref } from 'vue';

const state = reactive({
  count: ref(0),
});

const doubleCount = computed(() => {
  return state.count.value * 2;
});

在上面的代码中，我们创建了一个名为 `state` 的响应式对象，其中 `count` 属性使用了 `ref` 函数来创建一个响应式对象，初始值为 `0`。我们使用 `computed` 函数来创建了一个名为 `doubleCount` 的计算属性，它的值是 `count` 值的两倍。由于 `count` 是一个响应式对象，所以当 `count` 值发生改变时，`doubleCount` 的值也会自动更新。

我们可以在模板中使用 `doubleCount`，如下所示：

<template>
  <div>
    Count: {{ state.count }}
    Double Count: {{ doubleCount }}
  </div>
</template>

这样，当 `state.count` 的值发生改变时，模板中的 `doubleCount` 值也会自动更新。