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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
js实现圆盘记速表
Aug 03 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php实现Mysql简易操作类
2015/10/11 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
基于python实现微信模板消息
2015/12/21 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
python中partial()基础用法说明
2018/12/30 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
党章培训心得体会
2014/09/04 职场文书
财政局个人总结
2015/03/04 职场文书
四群教育工作总结
2015/08/10 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript