【Vue】响应式详解，何为Vue的响应式，Vue2/3响应式原理是什么？

何为响应式？

响应式在不同的语境下有着不同的含义，在传统网页开发意义上，响应式网页设计是指网页能够根据屏幕宽度自动适应，以达到适配各种屏幕，使网站在不同设备上都能得到完美的展现。

在Vue语境下，响应式指的是网页中的视图（dom元素）和数据（JS变量）是相互关联、相互影响的，这其实就是一种MVVM的设计模式。即视图可以影响数据，而数据也可以影响视图。

采用这种设计思想，可以尽可能的减少开发者的dom操作，开发者只需关注改变数据即可，不需要手动操作dom元素（由Vue代劳了），可以显著提高开发效率和运行性能。

Vue是如何实现响应式的？

在vue2中，vue使用 Object.defineProperty方法为data里面的每个数据都进行了数据代理，数据代理也叫数据劫持，意思是无论是谁在读取/写入这些数据时都要先经过vue的“审查”，vue会监听这些数据的变化，在数据改变时对视图进行更新。

整体步骤：

1. 使用Object.defineProperty进行数据代理

2. 监听到数据变化之后，构建新的虚拟dom对象

3. 采用diff算法对比新旧虚拟dom对象，并依据虚拟dom渲染/更新真实dom

可以看到，vue2实现响应式是基于Object.defineProperty进行数据代理的，但是这个方法有一定缺陷：

1. 只能劫持对象的属性（key值.Object.key()）,因此需要对每个对象的每个属性进行遍历。

2. 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，vue不能实时响应。必须通过重写数据的操作方法（push、unshift…）来对数组进行监听的。

3. 不能对 es6 新产生的 Map,Set 这些数据结构做出监听。

因此，我们为对象增加新属性时和通过数组下标改变数据时，需要用到vm.$set方法才行

vue3的整体步骤和vue2基本相同，但是为了解决以上问题，vue3使用了一个新的数据代理方法：proxy对象。

Proxy实现的数据代理比之前的更有优势：

1. defineProperty 一次只能对一个属性进行监听，需要遍历/递归来对所有属性监听，而Proxy可以直接监视整个对象而非单个属性。

2. 前者对于新增的属性必须额外处理（vue2里面使用vm.$set ）否则该属性不是响应式数据，后者直接监视整个对象所以不必额外处理了。

3. Proxy拦截方法更多，而且对于数组的监听更方便，vue2好像是通过对数组方法的重写才实现的代理。

4. 但是Proxy存在浏览器兼容问题，这点算是vue2略胜一筹。