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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
Firefox div高度自适应
Apr 28 Javascript
五段实用的js高级技巧
Dec 20 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
如何提高Dom访问速度
Jan 05 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
原生JS实现天气预报
Jun 16 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
javascript使用activex控件的代码
2011/01/27 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
js实现星星打分效果
2020/07/05 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python3.6简单反射操作示例
2018/06/14 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
考试违纪检讨书
2014/02/02 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
语文课外活动总结
2014/08/27 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
关于MySQL中的 like操作符详情
2021/11/17 MySQL
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python