|
|
@@ -1459,7 +1459,7 @@ function protoAugment (target, src: Object, keys: any) {
|
|
|
}
|
|
|
```
|
|
|
|
|
|
-那么 `protoAugment` 函数的作用是什么呢？相信大家已经猜到了，正如我们在讲解拦截数据变异方法的思路中所说的那样，可以通过设置数组实例的 `__proto__` 属性，让其指向一个代理原型，从而做到拦截。我们看下一 `protoAugment` 函数是如何被调用的：
|
|
|
+那么 `protoAugment` 函数的作用是什么呢？相信大家已经猜到了，正如我们在讲解拦截数据变异方法的思路中所说的那样，可以通过设置数组实例的 `__proto__` 属性，让其指向一个代理原型，从而做到拦截。我们看一下 `protoAugment` 函数是如何被调用的：
|
|
|
|
|
|
```js
|
|
|
const augment = hasProto
|
|
|
@@ -1641,7 +1641,7 @@ def(arrayMethods, method, function mutator (...args) {
|
|
|
})
|
|
|
```
|
|
|
|
|
|
-首先我们需要思考一下数组变异方法对数组的影响是什么？无非是**增加元素**、**删除元素**以及**变更元素顺序**。有的同学可能会说还有**替换元素**，实际上替换可以理解为删除和增加的复合操作。那么在这些变更中，我们需要重点关注的是**增加元素**的操作，即 `push`、`unshift` 和 `splice`，这三个变异方法都可以为数组添加新的元素，那么为什么要重点关注呢？原因很简单，因为新增加的元素是非响应式的，所以我们需要获取到这些新元素，并将其变为响应式数据才行，而这就是上面代码的目的。下面我们看下一具体实现，首先定义了 `inserted` 变量，这个变量用来保存那些被新添加进来的数组元素：`let inserted`。接着是一个 `switch` 语句，在 `switch` 语句中，当遇到 `push` 和 `unshift` 操作时，那么新增的元素实际上就是传递给这两个方法的参数，所以可以直接将 `inserted` 的值设置为 `args`：`inserted = args`。当遇到 `splice` 操作时，我们知道 `splice` 函数从第三个参数开始到最后一个参数都是数组的新增元素，所以直接使用 `args.slice(2)` 作为 `inserted` 的值即可。最后 `inserted` 变量中所保存的就是新增的数组元素，我们只需要调用 `observeArray` 函数对其进行观测即可：
|
|
|
+首先我们需要思考一下数组变异方法对数组的影响是什么？无非是**增加元素**、**删除元素**以及**变更元素顺序**。有的同学可能会说还有**替换元素**，实际上替换可以理解为删除和增加的复合操作。那么在这些变更中，我们需要重点关注的是**增加元素**的操作，即 `push`、`unshift` 和 `splice`，这三个变异方法都可以为数组添加新的元素，那么为什么要重点关注呢？原因很简单，因为新增加的元素是非响应式的，所以我们需要获取到这些新元素，并将其变为响应式数据才行，而这就是上面代码的目的。下面我们看一下具体实现，首先定义了 `inserted` 变量，这个变量用来保存那些被新添加进来的数组元素：`let inserted`。接着是一个 `switch` 语句，在 `switch` 语句中，当遇到 `push` 和 `unshift` 操作时，那么新增的元素实际上就是传递给这两个方法的参数，所以可以直接将 `inserted` 的值设置为 `args`：`inserted = args`。当遇到 `splice` 操作时，我们知道 `splice` 函数从第三个参数开始到最后一个参数都是数组的新增元素，所以直接使用 `args.slice(2)` 作为 `inserted` 的值即可。最后 `inserted` 变量中所保存的就是新增的数组元素，我们只需要调用 `observeArray` 函数对其进行观测即可：
|
|
|
|
|
|
```js
|
|
|
if (inserted) ob.observeArray(inserted)
|
everywill