Vue2数据响应式原理深度解析（ 三 ）

Vue2数据响应式原理逻辑深度解析（三）

========================

前言

大家好，欢迎来到今天的学习，在上一篇文章当中我们实现了关于对象绑定响应式的操作，今天我们来实现关于如何对数组内部的元素及数组内部新添加的元素进行响应式绑定。

目标

利用模块式编程，通过多个文件之间相互调用，文件内部的函数等方法嵌套循环使用来实现数组相关的响应式绑定

在这个系列中，有很多地方需要创建方法和文件，初学者可能一开始不知为什么这样做，等慢慢深入了解就能够把逻辑衔接起来了

在写逻辑代码实现功能之前，我们要知道我们现在具体要实现什么。第一，当访问数组时，会触发相应的get函数，这在上一篇已实现； 第二，我们操作数组的元素时，要对七个方法进行改写，例如当我们往原数组里追加数组时，那这个子数组也应该设置为响应时；第三，当我们把数组的其中一个元素设置为一个新数组时，这个新数组也应该设置为响应式

实现步骤

首先，我们在对象obj里设置一个数组g

let obj = {g: [22, 33, 44, 55]
} 

接着我们要对obj及其内部的对象g来添加响应式，我们可以先把具体的流程走一走

梳理执行顺序

首先让这个obj进行响应式绑定

然后这个obj会经过observe.js --> Observer.js --> utils.js -->defineReactive.js , 此时在defineReactive.js文件中，传递进去的data就是obj本身，key是属性g，因此这时候的val就是一个数组，接着这个数组会被observe一下，然后再次进入到Observer.js文件 ， 此时我们必须要对传进来的value进行判断，如果为数组，我们要将这个数组的原型指向一个arrayMethods里的所有属性

注意此时obj对象和内部的数组g身上都追加了一个 __ob__的属性

因此在Observer.js对传值的判断需要重写一下，如图