<template>
<div>
{{ obj.name }}
{{ name }}
<button @click="changeObjName">改变名字</button>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
export default {
setup() {
//通过reactive定义响应式引用类型的数据
let obj = reactive({
name: "张三",
age: 18,
});
function changeObjName() {
obj.name = "李四";
}
//通过es6扩展运算符进行解构使得对象中的属性不是响应式的
//toRefs(对象)使解构后的数据重新获得响应式
return {
obj,
changeObjName,
...toRefs(obj),
};
},
};
</script>
运行效果：点击改变名字 obj.name，name都变为李四
出 处：https://www.cnblogs.com/xiao-wo-niu/
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。