Vue3 -- ref & reactive & toRefs & toRef响应式引用

响应式原理

通过 proxy 对数据进行封装，当数据变化时，触发模板内容更新。

ref

• 作用：接受一个内部值并返回响应式对象；
• 处理：一般用于处理基础数据类型；
• 引用：ref需要从Vue中引入才能使用；
• 使用：通过value属性获取，使用数据时不需要使用value；

 			// 模板中使用时，vue底层自动调用 .value
            template:`<div>{
  {name}}</div>`,
            setup(){
                //引入ref
                const { ref } = Vue;
                // 响应式引用，proxy 将 '张三' 变成 proxy({ value: '张三'})
                let name = ref('张三');
                // 两秒后修改 name
                setTimeout(() => {
                    // 修改 name 使用 name.value
                    name.value = '李四';
                }, 2000);
                return{ name }
            }

页面渲染成功渲染出 张三

两秒后更新数据，重新渲染出 李四

reactive

• 作用：接受一个内部值并返回响应式对象；
• 引用：从Vue中引入才能使用；
• 处理：一般用于处理非基础数据类型；
• 解构：数据解构之后的数据不具备响应式；

数据未解构时

			template:`<div>{
  {obj.name}}</div>`,
            setup(){
                //引入reactive
                const { reactive } = Vue;
                // 响应式引用，proxy 将 {name: '张三'} 变成 proxy({name: '张三'})
                let obj = reactive({name: '张三'});
                // 两秒后修改 obj.name
                setTimeout(() => {
                    obj.name = '李四';
                }, 2000);
                return{ obj }
            }

页面渲染成功渲染出 张三

两秒后更新数据，重新渲染出 李四

尝试对数据进行解构

		template:`<div>{
  {name}}</div>`,
            setup(){
                //引入reactive
                const { reactive } = Vue;
                // 响应式引用，proxy 将 {name: '张三'} 变成 proxy({name: '张三'})
                let obj = reactive({name: '张三'});
                // 两秒后修改 obj.name
                setTimeout(() => {
                    obj.name = '李四';
                }, 2000);
                const { name } = obj;
                return{ name }
            }

页面渲染成功渲染出 张三

两秒后更新数据，页面没有变化

toRefs

• 作用：使解构后的数据重新获得响应式；
• 引用：从Vue中引入才能使用；
• 封装：封装数据中本身不存在某个数据时，会返回不具备响应式的undefined；

toRefs响应式引用

   		template:`<div>{
  {name}}</div>`,
            setup(){
                //引入reactive
                const { reactive, toRefs } = Vue;
                // 响应式引用，proxy 将 {name: '张三'} 变成 proxy({name: '张三'})
                let obj = reactive({name: '张三'});
                // 两秒后修改 obj.name
                setTimeout(() => {
                    obj.name = '李四';
                }, 2000);
                // 通过toRefs包装后会变为proxy({name:proxy({value:'name'})})
                const { name } = toRefs(obj);
                return{ name }
            }

页面渲染成功渲染出 张三

两秒后更新数据，重新渲染出 李四

toRefs封装不存在数据

 		template:`<div>{
  {age}}</div>`,
            setup(){
                //引入reactive