vue2与vue3实现响应式的区别及提升

vue2.x：

 实现原理：

　　对象类型：Object.defineProperty()对属性的读取，修改进行拦截（数据劫持）；

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

  　　Object.defineProperty(data,"count",{             　　get(){},             　　set(){}         　　}) 存在常见的问题：1：新增属性，删除属性，页面不会进行更新，2：直接通过下标修改数组，界面不会自动更新   vue3.0:
　实现原理： 　　不管你是使用的ref还是reactive,底层都是使用proxy实现响应式 　　通过proxy(代理)：拦截对象中任意属性的变化，包括属性的添加，删除，改写等等； 　　let person = {name:'小卢',age:18}
 　　const p = new Proxy(person,{             // 查             get(target,propName){                 // target:原来的对象                 // propName:当你读取对象中的哪个数据时，propName就是哪个，例如，你读取person中的name,propName在这里就代表name(对象里面对应的键）                 console.log(target,propName)                 return target[propName]   //因为是变量所有用[]             },             // 增，改             set(target,propName,value){                 console.log(target,propName)                 // value:你修改的那个新的值                 target.propName = value             },             // 删             deleteProperty(target,propName){                 return delete target[propName]    //删除propName这个属性             }         }) 　　reflect:对源对象进行操作（不详细介绍了，需要的自己可以百度，原理主要是上面那个） 　　 vue3中则解决了vue2中上述提到的一些问题  

 

标签：target,vue2,name,响应,value,propName,vue3,属性
来源： https://www.cnblogs.com/lzqailq/p/lzqailq4.html