揭开Vue的响应式秘密：深入剖析Vue2与Vue3的差异与革新

针对Vue2和Vue3的响应式原理做个简单的介绍整理，可以加深对其认知也可以应付简单的面试问题。

Vue2

1.实现原理

通过Object.defineProperty遍历data选项的所有属性，把每一个属性变成对应的getter和setter函数，读取某个属性的时候调用对应的getter函数，更新某个属性的时候调用对应的setter函数。

通俗易懂的来说就是：
对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截，也就是我们通常所说的数据劫持。
数组类型：通过重写和更新数组的一系列方法来实现拦截即数据劫持，也就是对数组原始的变更方法进行了封装。

2.存在问题

对象类型：新增属性和删除属性时虽然响应式数据发生变化但是界面不会更新。
数组类型：直接通过下标修改数组数据时虽然响应式数据发生变化但是界面不会更新。

3.核心代码

Object.defineProperty(data, 'item', {
get() {},
set() {}
})

Vue3

1.实现原理

由于vue2的Object.defineProperty有局限性，所以vue3采用了ES6的新特性Proxy和Reflect对象来实现，Proxy对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。Reflect是一个内置对象，其原型是Object.prototype。它不是一个函数，不能进行函数调用和构造函数调用。Reflect对象的方法和Proxy对象的方法一一对应，只要是Proxy对象的方法，都能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法完成默认行为。

通俗易懂的来说就是：
通过Proxy（代理）：拦截对象中任意属性的读写、添加、删除的变化。
通过Reflect（反射）：对被代理对象的属性进行更新操作。
Proxy相当于一个拦截器，对数据的增删改时都能被拦截到，然后通过Reflect来进行反射对源对象的属性进行更新，需要Proxy和Reflect配合使用从而达到预期效果。

2.核心代码

new Proxy(data, {
// 拦截读取属性
get(target, prop) {
return Reflect.get(target, prop)
},
// 拦截添加、设置属性
set(target, prop, value) {
return Reflect.set(target, prop, value)
},
// 拦截删除属性
deleteProperty(target, prop) {
return Reflect.deleteProperty(target, prop)
}
})