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 相关文章推荐
javascript parseInt 大改造
Sep 27 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
vue router仿天猫底部导航栏功能
Oct 18 Javascript
ES6关于Promise的用法详解
May 07 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 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中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
浅谈PHP的反射机制
2016/12/15 PHP
php将html转为图片的实现方法
2017/05/19 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
js模拟微博发布消息
2017/02/23 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
详解Python的Lambda函数与排序
2016/10/25 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python callable()函数用法实例分析
2018/03/17 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python pygame实现球球大作战
2019/11/25 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
Python文件操作的面试题
2013/06/22 面试题
电气专业应届生求职信
2013/11/01 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
妇女工作先进事迹
2014/08/17 职场文书
五心教育心得体会
2014/09/04 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书