Vue监听数组变化源码解析


Posted in Javascript onMarch 09, 2017

上一篇的代码中,忽略了对数组的处理,只关心了需要关心的部分,假装数组不存在。

这一篇开始考虑数组的问题。

从最简单的入手

先考虑一个问题,如何监听数组中的对象变化?忽略掉数组本身及其中的一般值,只考虑对象数组中的对象。

遍历数组,而后对数组中的每个对象调用 observe 方法

// 上一篇中出现的未曾重写的代码,这一篇中不再重复
var Observer = function Observer(value) {
  this.value = value;
  this.dep = new Dep();
  // 如果是数组,则遍历所有元素
  if(Array.isArray(value)) {
    this.observeArray(value);
  } else {
    this.walk(value);
  }
};
Observer.prototype.observeArray = function observeArray(items) {
  // 遍历数组所有元素,对单个元素进行 getter、setter 绑定
  for (var i = 0, l = items.length; i < l; i++) {
    observe(items[i]);
  }
};

现实的要求

实际实现中当然不会如上例那么简单,官方文档中对监听数组是这样描述的:

Vue 包含一组观察数组的突变方法,所以它们也将会触发视图更新。这些方法如下:
push()、pop()、shift()、unshift()、splice()、sort()、reverse()

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

当你直接设置一个项的索引时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
所以,要对数组本身的一些方法进行监听。

经常要用到的一个小函数

def,在整个 Vue 源码中反复出现,利用Object.defineProperty() 在 obj 上定义属性 key(也又可能是修改已存在属性 key):

function def(obj, key, val, enumerable) {
  Object.defineProperty(obj, key, {
    value: val,
    // 转变为 boole 值,如果不传参,转为 false
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  });
}

给对象添加一组方法

给对象添加一组方法,如果所在环境支持 proto,就简单了,直接把对象的 proto 指向这一组方法就好了;如果不支持,则遍历这一组方法,依次添加到对象中,作为隐藏属性(即 enumerable: false,不能被 in 关键字找到):

var hasProto = '__proto__' in {};
var augment = hasProto ? protoAugment : copyAugment;

function protoAugment(target, src) {
  target.__proto__ = src;
}
function copyAugment(target, src, keys) {
  for(var i = 0; i < keys.length; i++) {
    var key = keys[i];
    def(target, key, src[key]);
  }
}

先来一发简单的

var arrayPush = {};

(function(method){
  var original = Array.prototype[method];
  arrayPush[method] = function() {
    // this 指向可通过下面的测试看出
    console.log(this);
    return original.apply(this, arguments)
  };
})('push');
var testPush = [];
testPush.__proto__ = arrayPush;
// 通过输出,可以看出上面所述 this 指向的是 testPush
// []
testPush.push(1);
// [1]
testPush.push(2);

伪改写数组原型来监听数组的变化

如官方文档所言,所需监视的只有 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 7 种方法,这 7 种方法有可分为两类:

1、push()、unshift()、splice() 这三种可能会给数组添加新元素的方法;

2、其余的不会新增元素的方法。

为了避免污染全局的 Array,新建一个以 Array.prototype 为原型的对象,而后在这个对象本身附加属性,再把这个新建的对象作为原型或者作为属性添加到 Observer 的 value 中,来达到监视其变化的目的。

var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);

接着就是遍历需要触发更新的几个方法,依次将其附加到 arrayMethods 上:

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(function(method) {
  // 获取原始的数组操作方法
  var original = arrayProto[method];
  // 在 arrayMethods 上新建属性 method,并为 method 指定值(函数)
  // 即改写 arrayMethods 上的同名数组方法
  def(arrayMethods, method, function mutator() {
    var arguments$1 = arguments;

    var i = arguments.length;
    var args = new Array(i);
    // 将伪数组 arguments 转变为数组形式
    // 为何不用 [].slice.call(arguments)?
    while(i--) {
      args[i] = arguments$1[i];
    }
    var result = original.apply(this, args);
    // 因 arrayMethods 是为了作为 Observer 中的 value 的原型或者直接作为属性,所以此处的 this 一般就是指向 Observer 中的 value
    // 当然,还需要修改 Observer,使得其中的 value 有一个指向 Observer 自身的属性,__ob__,以此将两者关联起来
    var ob = this.__ob__;
    // 存放新增的数组元素
    var inserted;
    // 对几个可能有新增元素的方法单独考虑
    switch(method) {
      case 'push':
        inserted = args;
        break;
      case 'unshift':
        inserted = args;
        break;
      case 'splice':
        // splice 方法第三个参数开始才是新增的元素
        inserted =args.slice(2);
        break;
    }
    if(inserted) {
      // 对新增元素进行 getter、setter 绑定
      ob.observerArray(inserted);
    }
    // 触发方法
    ob.dep.notify();
    return result;
  });
};

var arrayKeys = Object.getOwnPropertyNames(arrayMethods);

更新 Observer

根据上例代码中的注释,改写 Observer,使得两者关联起来,达到监听数组变化的目的:

var Observer = function Observer(value) {
  this.value = value;
  this.dep = new Dep();
  def(value, '__ob__', this);
  // 如果是数组,则遍历所有元素
  if(Array.isArray(value)) {
    var argument = hasProto ? protoAugment : copyAugment;
    argument(value, arrayMethods, arrayKeys);
    this.observeArray(value);
  } else {
    this.walk(value);
  }
};

参考资料:
vue早期源码学习系列之二:如何监听一个数组的变化

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
我见过最全的个人js加解密功能页面
Dec 12 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
JavaScript的==运算详解
Jul 20 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
Node.js安装配置图文教程
May 10 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 #Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 #Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
js实现显示手机号码效果
Mar 09 #Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
javascript 秒表计时器实现代码
Mar 09 #Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 #Javascript
You might like
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
php常用数组函数实例小结
2016/12/29 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
python装饰器使用实例详解
2019/12/14 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
自我检讨书范文
2015/01/28 职场文书
公司出纳岗位职责
2015/03/31 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
导游词之日月潭
2019/11/05 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS