Vue2和Vue3数据响应式原理的不同？

 要想了解响应式原理就需要先了解vue中的数据劫持和数据代理

数据代理：

      data中的写入的数据都会通过加工再生成一份，组件实例对象vm._data中存储的就是data中的每个属性 get 和 set。然后name属性一改set就调，set的原理就是重新再解析模板，模板一解析就生成新的虚拟dom，然后新旧dom进行对比，然后更新页面 响应式原理

数据劫持：

      就是get和set每个数据身上都有一个get和set就是为了实现数据的响应式，getter 就是有人读取data中的属性就调用getter，进行数据劫持监视这个属性，set就是有人修改了_data中的数据然后就调用set。

vue2中data中定义得数组，并且没有键，那么他的_data中数据劫持是劫持不到的就是没有get 和 set ，你修改值是改变不了的，那么怎么解决，vue2中初始化的时候没有给数据，后续添加的都是没有get和set的，如果想拯救一下需要通过vue.set及另一个方法来解决，vue2对数组的push，pop，splice等等，进行了二次封装，使他重新调用解析模板...然后走页面更新流程
数据代理和数据劫持都离不开，object.definepropty数据劫持就是getter和setter 如果有人改了data中的属性就会调用setter，收到了你要修改的数据，并且修改原来的数据，然后重新解析模板

 

vue2的响应式原理

在vue2中数据响应式原来用到的是object.definprototype，定义变量的时候在data这个函数中去定义一些需要的变量Vue2中响应式原理是双向绑定的原则，是在数据获取的时候获取到getter和setter这两个方法，然后对这两个方法进行监听处理，最后在实现之中就实现了响应式原理

let preson={}
        Object.defineProperty(preson,'name',{
            get(){
                console.log('读取触发了')
                return preson.name
            },
            set(newValue){
                console.log('发现读取，被修改')
              preson.name=newValue       
            }
        })

vue3的响应式原理
Vue3中数据响应式原理用到的是proxy，如果setup语法糖，那么在script标签下就直接定义就可以了，如果是在写了一个setup函数，那么就需要在这个函数内部去定义，然后返回一个return的返回值，需要将上面定义的变量全部暴露出去

 let user = {
            name: '张三',
            sex: "男"
        }
        let proxyUser = new Proxy(user, {
            get(target, propertyName) {
                console.log(target)
                console.log(propertyName)
                return target[propertyName]
            },
            set(target, propertyName, newValue) {
                console.log(newValue)
                target[propertyName] = newValue
            },
            deleteProperty(target, propertyName) {
               return delete target[propertyName]
            }
        })

vue3中的通过ref来实现响应式对象跟vue2中的响应式原理是一样的，ref适合存放一些基本数据类型，那么他就会通过object.definepropty来进行数据劫持实现响应式原理，你如果存放的是对象或数组这些复杂数据类型，那么他也能解决只不过是去让proxy来进行解决。

reactive数据响应式理解：
他是vue3中的数据响应式原理，和object.definepropty区别不是很大，只不过是get和set接收到的参数都是一整条数据而不是vue2中的单条数据，并且set比vue中的set多接收一个数据，proxy中修改和添加都是使用一个set，proxy中提供了删除的api。

两者之间的区别：

vue2中的响应式核心是es5的Object.defineProperty，缺点有：

1. 深度监听需要递归到底，性能层面考虑不太好
2. 无法监听对象新增属性和删除属性，需要vue特殊处理
3. 无法监听原生数组，需要在数组原型上做拦截

  vue3采用了es6之后的proxy去重构了响应式原理，proxy能够很好的解决Object.defineProperty的局限性。

        局限性：包括1，对属性的添加、删除动作的检测、2，对数组下标的修改，对length修改的检测、3，对Map、Set、WeakMap和WeakSet的支持

proxy的好处：

1、可以监听对象而非属性。

2、可以监听数组的变化。

3、返回新对象，可以直接操作新对象修改达到目的，而object.defineProperty需要遍历对象，需要通过修改属性达到目的。

4、作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利。