Vue3 中如何将普通变量转换为响应式

在 Vue3 中，可以使用 reactive 函数来将一个普通的变量转换为响应式的。具体操作如下：

1. 导入 reactive 函数：

import { reactive } from 'vue'

2. 使用 reactive 函数创建一个响应式对象：

const state = reactive({
  count: 0
})

其中，state 就是一个响应式对象，count 是一个普通变量，现在已经被转换为响应式变量。

3. 在模板中使用响应式变量：

<template>
  <div>{{ state.count }}</div>
</template>

这样，当 count 的值发生变化时，模板中的内容也会自动更新。

注意：在 Vue3 中，响应式变量必须使用 reactive 函数创建，否则无法自动更新模板。同时，响应式变量也不能直接赋值，需要使用 Vue 提供的 API 来修改其值，例如：state.count = 1。