reactive函数可以定义一个响应式对象。
在div中引用对象里的数据就可以
<template><div class="ttt"><li v-for="data in reactive2" :key="data.name">{{data.name}}</li><h2>{{reactive3.name}}</h2><h2>{{reactive4.a.b.c.d}}</h2><button @click="updateReactive2">更新数据</button></div>
</template><script setup lang="ts" name="testName">import {ref} from 'vue'import {reactive} from 'vue'let reactive4 = reactive({a:{b:{c:{d:233}}}})let reactive3 = reactive({id:1,name:'测试数据'})let reactive2 = reactive([{name:'测试1'},{name:'测试2'},])function updateReactive2(){reactive2[0].name = "更新数据"reactive4.a.b.c.d = 6666}
</script><style>.ttt{color:red}
</style>
let searchForm = reactive({});
let data = reactive({
isAdmin: true,
isshowAccount: true
});
reactive 是什么?
reactive 是 Vue 3 Composition API 中的一个函数,用于创建一个包含响应式数据的对象。在 Vue 2.x 中,我们通常使用 data 选项来定义组件的数据,而在 Vue 3 中,可以使用 reactive 函数来创建响应式数据对象。
为什么使用它?
使用 reactive 函数可以将普通的 JavaScript 对象转换为响应式对象,使得对象的属性变化可以触发视图的更新。这样可以更方便地管理组件的状态,并确保数据的响应性。
如何使用?
导入 reactive 函数:在 Vue 3 应用中,通常需要从 Vue 模块中导入 reactive 函数。
创建响应式对象:通过调用 reactive 函数并传递一个普通的 JavaScript 对象作为参数来创建响应式对象。
访问和修改数据:可以像访问普通对象属性那样访问和修改响应式对象的属性,Vue 会自动追踪属性的变化并更新相关的视图。
在您的代码中,通过使用 reactive 函数创建了一个包含多个属性的响应式对象 data,其中的属性变化会触发组件视图的更新。您可以直接访问和修改 data 对象中的属性,这些属性的变化会被 Vue 监听到并反映在页面上。