<template>
<div @click="change">
<div>{{newObj1}}</div>
<div>{{newObj2}}</div>
</div>
</template>
<script>
import { ref, toRef } from 'vue'
setup() {
const obj = {name: '123123', age: 18}
let newObj1 = ref(obj.name);
let newObj2 = toRef(obj, 'name');
function change(){
// 不会修改原始数据,更新界面
// newObj1.value = 'Tom';
// console.log(obj,'---',newObj1.value)
// 修改原数据,不会更新界面
newObj2.value = 'Tom';
console.log(obj,'---',newObj2.value)
}
return {
obj,
newObj1,
newObj2,
change,
}
}
</script>
vue3 ref和toRef区别
最新推荐文章于 2024-09-06 22:20:29 发布
本文探讨了Vue中ref和toRef的区别,重点在于它们如何操作对象属性的深层引用。ref用于创建可响应的数据绑定,而toRef则允许直接修改原对象,适用于不想触发视图更新的情况。通过实例展示了如何在实际开发中正确使用这两种技术。
摘要由CSDN通过智能技术生成