toRef修改数据会触发UI更新吗？
问题描述：
在查阅网上资料时，发现了一条对比， 说toRef()创建的响应式数据并不会触发 vue 模版更新， 并且toRef()的使用场景是"对象的多个属性都变成响应式数据，并且要求响应式数据和原始数据相关联，并且更新响应式数据时不更新界面"。 感觉和我测试的结果不一样
可以请老师给出下面4条对比的正确性吗，谢谢
51
收起
正在回答
1回答
同学你好，这里老师结合例子帮你分析
1、ref()
<template>
<div>
<p>{{state}}</p>
<button @click="myFn">按钮</button>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "App",
setup() {
let obj = { name: "lnj" };
let state = ref(obj.name);
function myFn() {
state.value = "zs";
console.log(obj); //{name:"lnj"}
console.log(state); // {name:"zs"}
}
return { state, myFn }
}
}
</script>
<style>
</style>利用ref将一个对象中的属性变成响应式的数据，修改响应式的数据不会影响到原始数据，但会触发页面更新。
2、toRef()
<template>
<div>
<p>{{state}}</p>
<button @click="myFn">按钮</button>
</div>
</template>
<script>
import {ref, toRef} from "vue";
export default {
name: "App",
setup() {
let obj = {name:"lnj"};
let state = toRef(obj, "name");
function myFn() {
state.value = "zs";
console.log(obj); //{name:"zs"}
console.log(state); //{name:"zs"}
}
return {state, myFn}
}
}
</script>
<style>
</style>利用toRef将一个对象中的属性变成响应式的数据 ，修改响应式的数据会影响到原始数据的，但是如果响应式的数据是通过toRef创建的, 那么修改了数据并不会触发UI界面的更新。
3、toRefs
<template>
<div>
<p>{{state}}</p>
<button @click="myFn">按钮</button>
</div>
</template>
<script>
import { ref, toRef, toRefs } from "vue";
export default {
name: "App",
setup() {
let obj = { name: "lnj", age: 18 };
// let name = toRef(obj, "name");
// let age = toRef(obj, "age");
let state = toRefs(obj);
function myFn() {
// name.value = "zs";
// age.value = 666;
state.name.value = "zs";
state.age.value = 666;
console.log(obj); //{name:"zs", age:666}
console.log(state); //{name:"zs", age:666}
// console.log(name);
// console.log(age);
}
return { state, myFn }
}
}
</script>
<style>
</style>toRefs是批量创建ref类型数据，并和以前数据关联
希望可以帮到你，祝学习愉快！
-
Derossiwang #1
谢谢老师。
大体上明白了。 还有一个小问题。，希望老师能确认一下。
我总结了一下，感觉toRef（）创建的数据的视图更新是需要"追根溯源的"， 因为它就是一个对源对象的引用ref。所以
源对象为响应式类型： toRef()创建的引用ref - 会 - 触发视图更新
源对象不是响应式类型： toRef()创建的引用ref - 不会 - 触发视图更新
自我测试见下图
请问我这个总结是对的吗， 谢谢
2021-05-03 12:26:53
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星