关于vue.js:Vue3全家桶升级指南二reftoReftoRefs的区别

ref 是对原始数据的拷贝，当批改 ref 数据时，模板中的视图会产生扭转，然而原始数据并不会扭转。
toRef 是对原始数据的援用，批改 toRef 数据时，原始数据也会产生扭转，然而视图并不会更新。

在 vue3 中定义一个根底类型的响应式数据个别应用 ref，定义一个援用类型的响应式数据个别应用 reactive。

import {ref,reactive} from "vue"
export default {setup(){let num=ref(0)
    let obj=reactive({name:'张三',age:18})
    return {num,obj}    
}
}

这样在模板中应用的时候，就能够间接通过 {{num}}，{{obj.name}},{{obj.age}} 获取数据了。

根底类型的数据没有问题，然而援用类型的值在模板中这样写就比拟累赘了，咱们也能够间接解构进去，在模板中就能够间接应用 {{name}} 和{{age}}了。

import {ref,reactive} from "vue"
export default {setup(){let num=ref(0)
        let obj=reactive({name:'张三',age:18})
        let {name,age}=obj
        return {num,name,age}
    }
}

toRef 是将对象中的某个值转化为响应式数据 toRef(obj,key)

import {toRef} from "vue"
export default {setup() {let obj = { name: '张三', age: 18};
        let newObj = toRef(obj, 'name');
        setTimeout(() => {
            newObj.value = '李四';
            console.log(obj, newObj); //obj 中的 name 和 newObj 都变成李四了，然而视图显示还是张三，不会变动
        }, 2000);
        return {obj, newObj};
    },
};
</script>

toRef 是对原始数据的援用，批改 toRef 数据时，原始数据也会产生扭转，然而视图并不会更新。

toRefs 是将整个对象转化成响应式数据 toRefs(obj)

import {toRefs} from "vue"
export default {let obj = { name: '张三', age: 18};
        let newObj = toRefs(obj);
        setTimeout(() => {
            newObj.name.value = '李四';
            console.log(obj, newObj);
        }, 2000);
        return {obj, newObj};
}

须要留神的是，依照下面这种写法，在模板中应用的时候，须要依照这种形式 {{newObj.name.value}}（不太了解），如果想间接应用{{name}}，那么在 setup 中 return 的时候须要解构下

import {toRefs} from "vue"
export default {let obj = { name: '张三', age: 18};
        let newObj = toRefs(obj);
        setTimeout(() => {
            newObj.name.value = '李四';
            console.log(obj, newObj);
        }, 2000);
        return {obj, ...newObj};
}

这样在模板中就能够间接通过 {{name}} 来获取了。

小结一下

1、ref 是对元数据的拷贝，批改响应式数据时不会影响之前的数据，视图会更新

2、toRef 和 toRefs 是对元数据的援用，批改响应式数据时，元数据也会扭转，然而视图不会更新，toRef 批改的是对象的某个属性，toRefs 批改的是整个对象

3、toRefs 的应用场景：如果想让响应式数据和原来的数据关联起来同步更新，并且不更新视图，那么就能够应用 toRefs