vue2和vue3实现响应的原理

vue2 ：实现响应式的核心api es5提供的object.definProperty()。当vue在实力化的时候，会通过object.definProperty给data 对象的所有属性添加getter/setter 方法。当数据发生改变的时候会触发对应的setter 方法，从而触发页面渲染流程（为什么vue2 的data 是一个方法而不直接定义成一个对象????） 

vue3：实现响应式的核心api 是 es6提供 Proxy api  vue 通过这个api 可以拦截对象中任意属性的变化，当数据发生改变的时候 Proxy的set捕获器会被调用，从而触发页面渲染

v2和v3响应式的优缺点

优点

 v3:Proxy 监听的式整个对象中所有属性的变化，因此可以监听到新增，和删除属性

缺点

v2:  1.无法监听新增、删除属性

       2.无法监听原始数组，需要特殊处理（如push,pop, shift,unshift）

   解决办法：this.$set()  ， this.$delete()

      3 .深度监听需要一次性递归消耗较大