vue3。给变量添加响应式

在 Vue 3 中，可以使用 `reactive` 函数将对象转化为响应式对象，从而让其中的属性变化能够触发视图更新。具体操作如下：

1. 导入 `reactive` 函数：

import { reactive } from 'vue'

2. 定义一个普通的 JavaScript 对象：

const myObj = {
  name: 'Alice',
  age: 18
}

3. 使用 `reactive` 函数将对象转化为响应式对象：

const myReactiveObj = reactive(myObj)

4. 现在，`myReactiveObj` 就是一个响应式对象了。可以直接访问其中的属性，并且当属性值发生变化时，视图会自动更新：

myReactiveObj.name = 'Bob' // 视图会更新

需要注意的是，只有在模板中使用的属性才会被收集为响应式依赖。如果需要在代码中监听属性变化，可以使用 `watch` 函数。