ref、toRef、和toRefs的区别
ref
import { ref } from 'vue';
export default {
name:'App'
setup(){
let obj = {name : 'alice', age : 12};
let newObj= ref(obj.name);
const change = () => {
newObj.value = 'Tom';
console.log(obj,newObj)
}
return {newObj,change}
}
}
上述代码,当change执行的时候,响应式数据发生改变,而原始数据obj并不会改变。
原因在于,ref的本质是拷贝,与原始数据没有引用关系
toRef
而如果使用toRef将某个对象中的属性变成响应式数据,修改响应式数据是会影响到原始数据的。但是需要注意,如果修改通过toRef创建的响应式数据,并不会触发UI界面的更新。
所以,toRef的本质是引用,与原始数据有关联
import {toRef} from 'vue';
export default {
name:'App'
setup(){
let obj = {name : 'alice', age : 12};
let newObj= toRef(obj, 'name');
const change = () => {
newObj.value = 'Tom';
console.log(obj,newObj)
}
return {newObj,change}
}
}
上述代码,当change执行的时候,响应式数据发生改变,原始数据obj并不会改变,但是UI界面不会更新
ref和toRef的区别
- ref本质是拷贝,修改响应式数据不会影响原始数据;toRef的本质是引用关系,修改响应式数据会影响原始数据
- ref数据发生改变,界面会自动更新;toRef当数据发生改变是,界面不会自动更新
- toRef传参与ref不同;toRef接收两个参数,第一个参数是哪个对象,第二个参数是对象的哪个属性
所以如果想让响应式数据和以前的数据关联起来,并且想在更新响应式数据的时候不更新UI,那么就使用toRef
toRefs
有的时候,我们希望将对象的多个属性都变成响应式数据,并且要求响应式数据和原始数据关联,并且更新响应式数据的时候不更新界面,就可以使用toRefs,用于批量设置多个数据为响应式数据。(toRef一次仅能设置一个数据)
toRefs接收一个对象作为参数,它会遍历对象身上的所有属性,然后挨个调用toRef执行
import {toRefs} from 'vue';
export default {
name:'App'
setup(){
let obj = {name : 'alice', age : 12};
let newObj= toRefs(obj);
const change = () => {
newObj.name.value = 'Tom';
newObj.age.value = 18;
console.log(obj,newObj)
}
return {newObj,change}
}
}
toRefs解决return变量过多的问题
在setup中定义的变量如果想要在HTML模板中使用,就需要将数据return出去。如果数据过多就需要在return中再写一遍这个数据。
import {toRefs} from 'vue';
export default {
name:'App'
setup(){
let obj = reactive({
dataList: [],
isLoading: false,
handleChange: ()=>{
....
}
});
return { ...toRefs(obj) }
}
}
toref与torefs的区别
- toref是将非响应式对象转换为ref对象,一次只转换一个
- torefs是将响应式对象,转换成普通对象,普通对象的每一个property都是一个ref,返回包含这些ref对象的普通对象