Vue2与Vue3区别02-响应式的实现及ref与reactive区别

Vue2与Vue3区别02-响应式的实现

1. Vue2中的响应式

   ​ 实现原理：

   ​ 对象类型：Object.defineProperty()对属性的读取/修改进行拦截

   ​ 数组类型： 通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行包裹）

   ​ Object.defineProperty(data,‘属性名’,{

   ​ get(){},

   ​ set(){}

   ​ })

   ​ 存在问题：

   ​ 新增属性/删除属性，界面不会更新

   ​ 通过Vue.set()或vm.$set()实现新增属性/修改更新

   ​ Vue.delete()或vm.$delete()实现删除属性更新

   ​ 直接通过下标修改数组，界面不会自动更新

2. Vue3中的响应式

   实现原理：

   ​ 通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写/添加/删除

   ​ 通过Reflect(反射)：对源对象的属性进行操作

   new Proxy(对象,{
       	//get为读取属性值，target参数表示操作对象，propName是对象中对应的属性
   		get(target,propName){
               //通过反射Reflect操作
   			return Reflect.get(target,prop)
   		},
       	//设置属性值或添加新属性
   		set(target,propName,value){
   			return Reflect.set(target,propName,value)
   		},
       	//删除属性
       	deleteProperty(target,prop){
           	return Reflect.deleteProperty(target,prop)
       	}
   })
   

   实际使用时，vue3-app.vue对应代码：

   ​ 原理：reactive通过使用Proxy来实现响应式，通过Reflect操作元对象

   export default{
       name:'App',
       setup(){
           //响应式对象--reactive()
           let person = reactive({
               name:'zs',
         		age:20，
               x:{}
           })
           function f(){}
           //返回person对象和f方法
           return {person,f}
       }
   }
   

   3.ref与reactive对比

   ​ 定义时：

   ​ ref用来定义基本数据类型

   ​ reactive用来定义对象类型数据

   ​ ref也可用来定义对象类型数据，内部通过reactive转为代理对象

   ​ 原理：

   ​ Object.defineProperty()在的get与set实现响应式（数据劫持）

   ​ reactive通过使用Proxy实现响应式，并通过Reflect操作源对象内部的数据

   ​ 使用角度：

   ​ ref定义的数据，操作数据需要.value，读取数据时模板中直接读取,不需要.value

   ​ reactive定义的数据,操作与读取数据，都不需要.value