vue3动态命名响应式变量

在 Vue3 中，可以使用 `reactive` 函数将一个普通对象转换为响应式对象。而要动态命名响应式变量，可以使用 ES6 中的计算属性名和对象解构的语法。

例如，假设我们有一个动态生成的变量名 `varName`，我们可以这样定义一个响应式变量：

import { reactive } from 'vue'

const state = reactive({
  [varName]: null
})

这里使用了计算属性名 `[varName]` 来动态生成属性名，并且将其赋值为 `null`。此时，`state` 对象中就会存在一个以 `varName` 命名的响应式变量。

当然，如果你希望动态生成的变量名是一个字符串，也可以直接将其作为对象属性名：

import { reactive } from 'vue'

const state = reactive({
  varName: null
})

// 动态赋值
state[varName] = 'hello world'