vue-ref,reactive,toRefs,toRef总结

总结：ref，reactive，toRefs，toRef方法

响应式引用的原理：通过proxy对数据进行封装，当数据变化时，触发模版等内容的更新。

一、ref：
作用：接受一个内部值并返回响应式且可变的ref对象。ref对象具有指向
内部值的单个proxy.value。

• ref需要从Vue中引用才能使用。【const {ref} = Vue】
• ref一般定义基础类型数据
• 通过ref包装后需要通过value属性获取，proxy封装后变为 proxy{value:"xxx"}
• 模版中使用数据时，会自动调用value值，不需要使用value。

示例：

setup(){
    const {ref} = Vue;
    let name = ref('name');
    return {
        name,
    }
}

二、reactive
1、作用：接受一个内部值并返回响应式且可变的对象。

• reactive 需要从Vue引用才能使用；
• reactive 一般定义非基础数据类型
• 通过reavtive包装数据，也就是proxy封装后变为proxy(数据)

示例：

setup() {
    const {reactive} = Vue;
    let arr = reactive([123]);
    return {
        arr
    }
}

注：将数据解构之后再返回不具备响应式。

三、toRefs
1、toRefs原理：{name:'hello'}通过reactive包装变成 proxy({name:'hello'}),
再次通过toRefs包装后将变成为proxy({name:proxy({value:'hello'})})

示例：setup(){
    const {reactive,toRefs} = Vue;
    let obj = reactive({
        name:'hello'
    });
    const {name} = toRefs(obj);
    return{
        name
    }
}

注：toRefs封装，如果响应式数据中本身不存在某个数据，那么不会给一个默认的引用，
而是默认undefine，不具备响应式。

eg：
data{
    name:'hello',
}
const {age} = toRefs(data)

此时 age不存在data中，所以不会给默认值，不具备响应式。

四、toRef
1、原理：toRef方法不需要解构，两个参数，一个总数据，一个获取的数据，

示例：setup(){
    const {reactive,toRef} = Vue;
    let obj = reactive({
        name:'hello'
    });
    const age = toRef(obj,'age'); //这样定义，不需要哦解构
    setTimeout(() => {
        age.value = 18
    },2000);
    return {
        age
    }
}

此时，age变更后会有值，也会具备响应式。