vue2与vue3实现响应式的原理区别和提升

区别：

vue2.x：

实现原理：

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

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

  　　Object.defineProperty(data,"count",{

            　　get(){},

            　　set(){}

        　　})

 

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:对源对象进行操作（不详细介绍了，需要的自己可以百度，原理主要是上面那个）

vue2存在常见的问题：

1：新增属性，删除属性，页面不会进行更新，2：直接通过下标修改数组，界面不会自动更新

　　vue3中则解决了vue2中上述提到的一些问题