Vue3.0 中的ref、toRef、toRefs区别

Vue3.0 ref、toRef、toRefs的区别

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

 

Vue3 Composition API: 对比ref和reactive   https://zhuanlan.zhihu.com/p/267967246

全面解析Vue3 Reactive家族和Ref家族API    https://www.jianshu.com/p/cfe25e757d0e

那么为什么Vue2的defineproperty并没有区分基本数据类型和引用数据类型呢？

因为defineproperty就是Object的静态方法，它只是为对象服务的，甚至无法对数组服务，因此Vue 2弄了一个data根对象来存放基本数据类型，这样无论什么类型，都是根对象的property，所以也就能代理基本数据类型。而Proxy能对所有引用类型代理，Vue 3也不再用data根对象，而是一个个的变量，所以带来了新问题，如何代理基本数据类型呢？并没有原生办法，只能构建一个{value: Proxy Object}结构的对象，这样Proxy也就能代理了。