vue3之reactive定义复杂数据为响应式数据
warning:
这篇文章距离上次修改已过256天，其中的内容可能已经有所变动。
在Vue 3中，可以使用reactive函数来创建响应式对象。这个函数位于vue包中，可以使组件的数据响应式。
下面是一个简单的例子，展示如何使用reactive来定义复杂数据为响应式数据：
import { reactive } from 'vue';
export default {
setup() {
// 使用reactive创建响应式对象
const state = reactive({
user: {
name: '张三',
age: 30,
address: {
city: '北京',
street: '中关村'
}
},
posts: [{ id: 1, title: '标题1' }, { id: 2, title: '标题2' }]
});
// 返回响应式对象，在模板中可以直接访问
return state;
}
};在上面的例子中，state对象是响应式的，这意味着它的任何嵌套属性的变化都将触发界面更新。例如，如果你改变state.user.name，相关视图会自动更新显示新的名字。
评论已关闭