1、ref

• ref 用于为数据添加响应式状态。只能操作基本数据类型。返回一个具有响应式状态的副本。

    const app = Vue.createApp({
        template:`<div>{{name}}</div>`,
        setup(props,conttext){
            const { ref } = Vue;
            let name = ref('吴彦祖');

            return { name }
        }
    });
    const vm = app.mount('#root');

• 原理：通过 ref 对数据进行封装，当数据变化时，触发模版等内容的更新。通过proxy把name变成 proxy({value: '吴彦祖'}) 这样的一个响应式引用。

2、reactive

• reactive 用于为对象添加响应式状态。接收一个对象作为参数，返回一个具有响应式状态的副本。获取数据值的时候直接获取，不需要加.value，参数只能传入对象类型。

const app = Vue.createApp({
        template:`<div>{{objname}}---{{age}}</div>`,
        setup(props,conttext){
            const { reactive, readonly, toRefs } = Vue;
            let nameObj = reactive({name:'刘德华',age:27})
            setTimeout(() => {
                nameObj.name= '张学友';
            }, 2000);
            const {name, age} = toRefs(nameObj);
            return { name, age }
        }
    });
    const vm = app.mount('#root');

3、toRefs

• toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。
• 原理：通过 toRefs将{name:'刘德华',age:27} 变成 { name: proxy({ value: 'dell'}),age: proxy({value: 28}) }

4、toRef

    const app = Vue.createApp({
        template:`<div>{{age}}</div>`,
        setup(props,conttext){
            const { reactive, toRef } = Vue;
            let data = reactive({name:'刘德华'})
            const age = toRef(data,'age');
            setTimeout(() => {
                data.age = 27;
            }, 2000);
            
            return { age }
        }
    });
    const vm = app.mount('#root');

toRef函数和toRefs函数的区别:

(https://blog.csdn.net/wuxing164/article/details/109801542?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-109801542-blog-112287552.pc_relevant_multi_platform_whitelistv5&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-109801542-blog-112287552.pc_relevant_multi_platform_whitelistv5&utm_relevant_index=2)