Vue3.如何把一个对象内的键值变成响应式变量

fridayCodeFly2025-03-20 13:19

在 Vue 3 中，若要把 tables 对象里的内容作为变量声明并使用，可借助 reactive 或者 toRefs 来达成。下面为你详细介绍这两种方式：

方法一：使用 reactive

reactive 用于创建响应式对象，你可以把 tables 对象包装成响应式对象，然后在模板或者 setup 函数里使用这些属性。

html 复制代码

<template>
  <div>
    <p>{{ tables.a }}</p>
    <p>{{ tables.b }}</p>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const tables = { a: '', b: '' };
// 将 tables 对象转换为响应式对象
const reactiveTables = reactive(tables);

// 在 setup 函数中使用这些属性
console.log(reactiveTables.a);
console.log(reactiveTables.b);
</script>

代码解释

运用 reactive 函数把 tables 对象转换为响应式对象 reactiveTables。
在模板里通过 {{ reactiveTables.a }} 和 {{ reactiveTables.b }} 来访问这些属性。
在 setup 函数里也能直接使用 reactiveTables.a 和 reactiveTables.b。

方法二：使用 toRefs

toRefs 用于将响应式对象的属性转换为响应式引用，这样就能在解构赋值后依然保持响应式。

代码解释

先使用 reactive 函数把 tables 对象转换为响应式对象 reactiveTables。
接着使用 toRefs 函数将 reactiveTables 对象的属性转换为响应式引用。
通过解构赋值将 a 和 b 提取出来，在模板里可以直接使用 {{ a }} 和 {{ b }} 访问这些属性。
在 setup 函数里，需要通过 .value 来访问这些属性的值。

这两种方法都能让你在 Vue 3 里使用 tables 对象的属性，你可以依据具体需求选择合适的方法