Vue2 响应式系统之数组
本文接Vue2响应式系统 、Vue2 响应式系统之分支切换 ,响应式系统之嵌套、响应式系统之深度响应 还没有看过的小伙伴需要看一下。
1、场景
import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { list: ["hello"], }; observe(data); const updateComponent = () => { for (const item of data.list) { console.log(item); } }; new Watcher(updateComponent); data.list = ["hello", "liang"];
先可以一分钟思考下会输出什么。
虽然 的值是数组,但我们是对 进行整体赋值,所以依旧会触发 的 ,触发 进行重新执行,输出如下:list
data.list
data.list
set
Watcher
2、场景 2
import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { list: ["hello"], }; observe(data); const updateComponent = () => { for (const item of data.list) { console.log(item); } }; new Watcher(updateComponent); data.list.push("liang");
先可以一分钟思考下会输出什么。
这次是调用 方法,但我们对 方法什么都没做,因此就不会触发 了。push
push
Watcher
3、方案
为了让 还有数组的其他方法也生效,我们需要去重写它们,通过push
代理模式 我们可以将数组的原方法先保存起来,然后执行,并且加上自己额外的操作。
/* * not type checking this file because flow doesn't play well with * dynamically accessing methods on Array prototype */ /* export function def(obj, key, val, enumerable) { Object.defineProperty(obj, key, { value: val, enumerable: !!enumerable, writable: true, configurable: true, }); } */ import { def } from "./util"; const arrayProto = Array.prototype; export const arrayMethods = Object.create(arrayProto); const methodsToPatch = [ "push", "pop", "shift", "unshift", "splice", "sort", "reverse", ]; /** * Intercept mutating methods and emit events */ methodsToPatch.forEach(function (method) { // cache original method const original = arrayProto[method]; def(arrayMethods, method, function mutator(...args) { const result = original.apply(this, args); /*****************这里相当于调用了对象 set 需要通知 watcher ************************/ // 待补充 /**************************************************************************** */ return result; }); });
当调用了数组的 或者其他方法,就相当于我们之前重写属性的 ,上边待补充的地方需要做的就是通知 中的 。push
set
dep
Watcher
export function defineReactive(obj, key, val, shallow) { const property = Object.getOwnPropertyDescriptor(obj, key); // 读取用户可能自己定义了的 get、set const getter = property && property.get; const setter = property && property.set; // val 没有传进来话进行手动赋值 if ((!getter || setter) && arguments.length === 2) { val = obj[key]; } const dep = new Dep(); // 持有一个 Dep 对象,用来保存所有依赖于该变量的 Watcher let childOb = !shallow && observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { const value = getter ? getter.call(obj) : val; if (Dep.target) { dep.depend(); } return value; }, set: function reactiveSetter(newVal) { const value = getter ? getter.call(obj) : val; if (setter) { setter.call(obj, newVal); } else { val = newVal; } dep.notify(); }, }); }
如上边的代码,之前的 是通过闭包,每一个属性都有一个各自的 ,负责收集 和通知 。dep
dep
Watcher
Watcher
那么对于数组的话,我们的 放到哪里比较简单呢?dep
回忆一下现在的结构。
const data = { list: ["hello"], }; observe(data); const updateComponent = () => { for (const item of data.list) { console.log(item); } }; new Watcher(updateComponent);
上边的代码执行过后会是下图的结构。
list
属性在闭包中拥有了 属性,通过 ,收集到了包含 函数的 。Dep
new Watcher
updateCompnent
Watcher
同时因为 的 是数组,也就是对象,通过上篇 list
value
["hello"]
响应式系统之深度响应 (opens new window)我们知道,它也会去调用 函数。Observer
那么,我是不是在 中也加一个 就可以了。Observer
Dep
这样当我们调用数组方法去修改 的值的时候,去通知 中的 就可以了。['hello']
Observer
Dep
3、收集依赖代码实现
按照上边的思路,完善一下 类。Observer
export class Observer { constructor(value) { /******新增 *************************/ this.dep = new Dep(); /************************************/ this.walk(value); } /** * 遍历对象所有的属性,调用 defineReactive * 拦截对象属性的 get 和 set 方法 */ walk(obj) { const keys = Object.keys(obj); for (let i = 0; i < keys.length; i++) { defineReactive(obj, keys[i]); } } }
然后在 中,当前 中的 也去收集依赖。get
Oberver
dep
export function defineReactive(obj, key, val, shallow) { const property = Object.getOwnPropertyDescriptor(obj, key); // 读取用户可能自己定义了的 get、set const getter = property && property.get; const setter = property && property.set; // val 没有传进来话进行手动赋值 if ((!getter || setter) && arguments.length === 2) { val = obj[key]; } const dep = new Dep(); // 持有一个 Dep 对象,用来保存所有依赖于该变量的 Watcher let childOb = !shallow && observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { const value = getter ? getter.call(obj) : val; if (Dep.target) { dep.depend(); /******新增 *************************/ if (childOb) { // 当前 value 是数组,去收集依赖 if (Array.isArray(value)) { childOb.dep.depend(); } } /************************************/ } return value; }, set: function reactiveSetter(newVal) { const value = getter ? getter.call(obj) : val; if (setter) { setter.call(obj, newVal); } else { val = newVal; } dep.notify(); }, }); }
4、通知依赖代码实现
我们已经重写了 方法,但直接覆盖全局的 方法肯定是不好的,我们可以在 类中去操作,如果当前 是数组,就去拦截它的 方法。array
arrray
Observer
value
array
这里就回到 的原型链上了,我们可以通过浏览器自带的 ,将当前对象的原型指向我们重写过的方法即可。js
__proto__
考虑兼容性的问题,如果 不存在,我们直接将重写过的方法复制给当前对象即可。__proto__
import { arrayMethods } from './array' // 上边重写的所有数组方法 /* export const hasProto = "__proto__" in {}; */ export class Observer { constructor(value) { this.dep = new Dep(); /******新增 *************************/ if (Array.isArray(value)) { if (hasProto) { protoAugment(value, arrayMethods); } else { copyAugment(value, arrayMethods, arrayKeys); } /************************************/ } else { this.walk(value); } } /** * 遍历对象所有的属性,调用 defineReactive * 拦截对象属性的 get 和 set 方法 */ walk(obj) { const keys = Object.keys(obj); for (let i = 0; i < keys.length; i++) { defineReactive(obj, keys[i]); } } } /** * Augment a target Object or Array by intercepting * the prototype chain using __proto__ */ function protoAugment(target, src) { /* eslint-disable no-proto */ target.__proto__ = src; /* eslint-enable no-proto */ } /** * Augment a target Object or Array by defining * hidden properties. */ /* istanbul ignore next */ function copyAugment(target, src, keys) { for (let i = 0, l = keys.length; i < l; i++) { const key = keys[i]; def(target, key, src[key]); } }
还需要考虑一点,数组方法中我们只能拿到 值,那么怎么拿到 对应的 呢。value
value
Observer
我们只需要在 类中,增加一个属性来指向自身即可。Observe
export class Observer { constructor(value) { this.dep = new Dep(); /******新增 *************************/ def(value, '__ob__', this) /************************************/ if (Array.isArray(value)) { if (hasProto) { protoAugment(value, arrayMethods); } else { copyAugment(value, arrayMethods, arrayKeys); } } else { this.walk(value); } } ... }
回到最开始重写的 方法中,只需要从 中拿到 去通知 即可。array
__ob__
Dep
Watcher
/* * not type checking this file because flow doesn't play well with * dynamically accessing methods on Array prototype */ import { def } from "./util"; const arrayProto = Array.prototype; export const arrayMethods = Object.create(arrayProto); const methodsToPatch = [ "push", "pop", "shift", "unshift", "splice", "sort", "reverse", ]; /** * Intercept mutating methods and emit events */ methodsToPatch.forEach(function (method) { // cache original method const original = arrayProto[method]; def(arrayMethods, method, function mutator(...args) { const result = original.apply(this, args); /*****************这里相当于调用了对象 set 需要通知 watcher ************************/ const ob = this.__ob__; // notify change ob.dep.notify(); /**************************************************************************** */ return result; }); });
5、测试
import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { list: ["hello"], }; observe(data); const updateComponent = () => { for (const item of data.list) { console.log(item); } }; new Watcher(updateComponent); data.list.push("liang");
这样当调用 方法的时候,就会触发相应的 来执行 函数了。push
Watcher
updateComponent
当前的依赖就变成了下边的样子:
6、总结
对于数组的响应式我们解决了三个问题,依赖放在哪里、收集依赖和通知依赖。
我们来和普通对象属性进行一下对比。
到此这篇关于Vue2 响应式系统之数组的文章就介绍到这了,更多相关Vue2 数组内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://vue.windliang.wang
相关文章
- 在php中eval是一个函数并且不能直接禁用了,但eval函数又相当的危险了经常会出现一些问题了,今天我们就一起来看看eval函数对数组的操作 例子, <?php $data="array...2016-11-25
- 这篇文章主要介绍了Python 图片转数组,二进制互转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
- 本文章提供在量的数据中级操作实例有如对键名比较计算数组的差集 计算差集 给指定数组中插入一个元素 反转数组 交集赋值新的数组实例。 //定义回调函数 funct...2016-11-25
- 这篇文章主要介绍了C#二维数组基本用法,以实例形式分析了C#中二维数组的定义、初始化、遍历及打印等用法,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- Array数组在C#中同样是最基本的数据结构,下面为大家C#数组的常用操作方法小结,皆为细小的代码段,欢迎收看收藏...2020-06-25
- 下面一段代码给大家介绍php curl模拟post请求的示例代码,具体代码如下: <?php$uri = "http://www.cnblogs.com/test.php";//这里换成自己的服务器的地址// 参数数组$data = array ( 'name' => 'tanteng'// 'passwor...2015-11-24
- 这篇文章主要为大家详细介绍了python实现学生通讯录管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-02-25
- 下面小编就为大家带来一篇C# 拷贝数组的几种方法(总结)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 本文记录的要实现的功能类似于 MySQL 中的 ORDER BY,上个项目中有遇到这样的一个需求。 要求:从两个不同的表中获取各自的4条数据,然后整合(array_merge)成一个数组,再根据数据的创建时间降序排序取前4条。 遇到这个...2014-06-07
- 这篇文章主要介绍了C#实现字符串转换成字节数组的简单实现方法,仅一行代码即可搞定,非常简单实用,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了c#将字节数组转成易读的字符串的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了C#读取文件所有行到数组的方法,涉及C#针对文件及数组的相关操作技巧,需要的朋友可以参考下...2020-06-25
- 如何将下面的二维数组转为一维数组。复制代码 代码如下:$msg = array( array( 'id'=>'45', 'name'=>'jack' ), array( 'id'=>'34', 'name'=>'mary' ), array( 'id...2014-05-31
- 在php中为我们提供了一个函数var_export 他可以直接将php代码入到一个文件中哦。 代码如下 复制代码 var_export($times,true);后面不加tru...2016-11-25
- 本文为代码分享,也是在工作中看到一些“大牛”的代码,做做分享。 具体是这样的,如下一个二维数组,是从库中读取出来的。 代码清单: 复制代码 代码如下: $user = array( 0 => array( 'id' => 1, 'name' => '张三', 'ema...2014-06-07
- 如今高要求的分布式系统的建造者遇到了不能完全由传统的面向对象编程(OOP)模型解决的挑战,但这可以从Actor模型中获益。...2021-05-20
- 1.前言 昨天碰到一道关于如何解决有序数组的连接问题,这是一个很常见的问题。但是这里要考虑到代码的效率问题,因为要连接的数组都是有序的,这是一个非常重要的前提条件。2.简单但效率不高的算法 我首先想到的是使用...2013-10-04
- 今天小编就为大家分享一篇python 实现将Numpy数组保存为图像,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-27
- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
C#中数组、ArrayList、List、Dictionary的用法与区别浅析(存取数据)
在工作中经常遇到C#数组、ArrayList、List、Dictionary存取数据,但是该选择哪种类型进行存储数据呢?很迷茫,今天小编抽空给大家整理下这方面的内容,需要的朋友参考下吧...2020-06-25