【Vue】浅谈vue2、vue3响应式原理，vue中数组的响应式，响应式常见问题分析

前言：此处响应式指的是数据响应式变化，而不是页面的响应式布局，页面的响应式布局在我的其他文章中有提到。

一、什么是vue响应式

Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时，视图会随即自动更新。

二、vue2的响应式原理

2.1 官方解释

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

2.2 大白话解释

Vue在组件和实例初始化的时候，会将data()里的数据进行数据劫持，即使用object.definepropty对数据做处理。被劫持处理过后的数据会有两个方法：一个叫getter，一个叫setter。

• getter是使用数据的时候触发，
• setter是在修改数据的时候触发，触发setter的同时也触发了底层的watcher监听，通知dom修改刷新。
  

2.3 数组的响应式

• 对于对象会遍历它所有的属性，然后使用Object.defineProperty重写get、set方法，对对象的每个属性进行劫持。如果属性值还是对象，则会进行递归。

• 对于数组，也会遍历它所有的元素，然后使用Object.defineProperty方法对每个元素进行劫持。然后还会重写数组原型上push、pop、shift、unshift、sort、reverse、splice七个方法。

对于数组本身，并没有像对象一样，使用Object.defineProperty对自身和下标重写get、set方法。这也就导致了我们直接通过下标赋新值或直接删除值是不能响应式。(为了性能考虑 Vue2 直接弃用了使用 Object.defineProperty 对数组进行监听的方案)

注意：
对于数组我们不要以为通过下标修改数据就一定不能响应式，如果数组元素是引用数据类型，恰巧只需要修改该引用数据类型某属性，是可以直接通过下标更改的。
因为前面说了，虽然数组并没有像对象一样，使用Object.defineProperty对自身和下标重写get、set方法，但是它会遍历它所有的元素，然后使用Object.defineProperty方法对每个元素进行劫持。所以我们更改某引用数据类型的某属性是可以响应式的！！！

例如：

{data() {return {arr: [123, {name: '张三'}]}},methods: {updateArr(){this.arr[1]['name'] = '李四' // 这样是可以响应式的}}
}

2.4 特别备注

由于vue2使用Object.defineProperty方法，会重写get、set方法，提前将数据进行劫持。这也就导致了在后面给对象添加新属性和直接删除属性是(删除不会触发set方法)不能响应式。（即它只对初始对象的属性有监听作用）
鱿鱼须也知道有这个缺陷，提供了$set/$delete来帮助我们达到响应式。

2.5 文章

vue2的响应式原理官方文档
getter/setter的使用方法

三、vue3的响应式原理

3.1 官方解释

在 Vue 3 中则使用了 Proxy 来创建响应式对象，仅将getter / setter 用于 ref。

3.2 大白话解释

Proxy 是 JavaScript 2015 的一个新特性。 Proxy 的代理是针对整个对象的，而不是对象的某个属性，因此不同于 Object.defineProperty 的必须遍历对象每个属性， Proxy 只需要做一层代理就可以监听同级结构下的所有属性变化（包括：属性值的读写，属性的增加，属性的删除等），当然对于深层结构，递归还是需要进行的。此外 Proxy支持代理数组的变化。

Proxy 本质上属于元编程非破坏性数据劫持，在原对象的基础上进行了功能的衍生而又不影响原对象，符合松耦合高内聚的设计理念。

3.3 特别备注

在IE11以下的浏览器都不兼容，所以如果使用 Vue3 开发一个单页应用的项目，需要考虑到兼容性问题，需要我们做额外的很多操作，才能使得IE11 以下的版本能够兼容。

3.4 文章

vue3的响应式原理官方文档
ES6的proxy代理的使用方法

四、常见响应式问题

4.1 vue2中数据改变但是视图未更新

1、Vue.set()或this.$set()

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如：

Vue.set(vm.someObject, 'b', 2);
this.$set(this.someObject,'b',2);

2、this.$forceUpdate()强制刷新数据

迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

3、Object.assign()解决vue2中对象新增属性不是响应式问题

有时你可能需要为已有对象赋值多个新 property，比如使用 Object.assign()或 _.extend()。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。
将源对象和要加入属性的对象合并为一个新的对象赋值给要响应式的对象（源对象），vue会将源对象重新触发一遍Object.defineProperty依赖收集。

this.msg = Object.assign({}, this.msg, { age: 18 }); //（响应式）

未完待续…