用打字稿在vue3中初始化没有值的反应变量的最佳方法是什么？答案

【问题标题】：what's the best way to initialize reactive variable without value in vue3 with typescript?用打字稿在vue3中初始化没有值的反应变量的最佳方法是什么？
【发布时间】：2022-06-15 13:57:05
【问题描述】：

我想初始化一个没有值的reactive 变量。我试过了：

const workspaceReact = reactive(null) // wrong! it is seems value null can not being passed to reactive()

所以我尝试了以下代码，它似乎工作：

let workspaceReact:UnwrapRef<ToolboxInfo>;
workspaceReact = reactive(toolbox)

但我觉得它太复杂了。有没有更好的方法来做到这一点？

【问题讨论】：

标签： typescript vue.js vuejs3 vue-composition-api

【解决方案1】：

一种解决方案是从reactive 切换到ref，并在<script setup> 中使用Reactivity Transform，它会自动解开refs。

要使用它，请将ref/computed 替换为$ref/$computed（无需导入）：

<script setup lang="ts">
import { onMounted } from 'vue'

type ToolboxInfo = {
  name: string
  id: string
  counter: number
}
                       ?
let workspaceReact = $ref<ToolboxInfo | null>(null)
let msg = $computed(() => `Hello ${workspaceReact?.name}!`)
const onClick = () => workspaceReact!!.counter++

onMounted(() => {
  workspaceReact = {
    id: 'my id',
    name: 'my toolbox',
    counter: 0,
  }
})
</script>

demo

警告：截至vue@3.2.37，此功能仍处于试验阶段：

⚠️ 实验功能

反应性转换目前是一项实验性功能。默认情况下它被禁用并且需要explicit opt-in。它也可能在最终确定之前发生变化。要保持最新状态，请关注其proposal and discussion on GitHub。

【讨论】：

虽然我同意这是一个很好的解决方法，但我认为您应该注意，这是 ATM 仍被视为实验性功能 “反应性转换目前是一个实验性功能。它被禁用默认并需要明确选择加入。它也可能在最终确定之前更改“
@Daniel 已更新说明

【解决方案2】：

这是不可能的。 reactive 需要扩展一个对象 https://vuejs.org/api/reactivity-core.html#reactive

反应式（）

返回对象的反应式代理。

类型
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

您的选择是：

用空对象初始化{}
使用ref

【讨论】：