例如我们用reactive定义一个变量的时候,想用解构的方式书写
<div>
{{ name }}
<button @click="changeName">修改name</button>
</div>
setup() {
const { name } =reactive({
name: 'lsh'
});
const changeName = () => {
name = '哈哈';
};
return {
name,
changeName
};
}
这样修改的话,页面是不会发生变化的,解决办法就是用toRef包裹它们,toRef是对一个属性进行转化
setup() {
const info = reactive({
name: "lsh",
});
let name = toRef(info, "name");
const changeName = () => {
name.value = "哈哈";
/* info.name = '德玛西亚' //这样写还是生效的 */
};
return {
name,
changeName,
};
},
如果有很多属性都想转化成ref的话,就用toRefs
setup() {
const info =reactive({
name: 'lsh',
age: 18
});
let { name, age } = toRefs(info);
const changeName = () => {
name.value = '哈哈';
/* info.name = '德玛西亚' //这样写还是生效的 */
};
return {
name,
age,
changeName
};
}
这样就能做到响应式