关于vue中如何监听数组变化


Posted in Vue.js onApril 28, 2021

前言

前段时间学习了关于vue中响应式数据的原理,(并作了学习笔记vue响应式原理),其实是通过Object.defineProperty控制getter和setter,并利用观察者模式完成的响应式设计。那么数组有一系列的操作方法,这些方法并不会触发数组的getter和setter方法。那么vue中针对数组的响应式设计是如何实现的呢...那么我们一起去学习下吧~

源码部分

https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js

从哪开始第一步学习呢

Emmmm...
我觉得要先把Vue中的数据响应式原理弄清楚,这样对于理解vue中是如何检测数组的变化才比较好,所以,可以去网上找下文章然后配合源码进行阅读,相信你一定会理解的。推荐下我之前看的一篇博客,还有我看过后自己写的学习记录吧,哈哈。

vue响应式原理

vue的双向绑定原理和实现

好的,先看看这个吧。哈哈!

从图开始

咱们先看下下面的图,先了解下vue中实现的思路,这样接下来再看源码的实现,会一清二楚,明明白白。

关于vue中如何监听数组变化

看到这个图然后思考一下,是不是大致了解了~

首先判断浏览器是否支持__proto__指针

重写数组的这7个方法,然后根据是否支持__proto__,将改写后的数组指向数组的prototype。

是不是很简单!!!

看看源码吧

了解了实现原理,那么我们再看看源码吧,看下源码主要是更深入的了解作者是如何实现的,也可以看下优秀的代码编码方式,加以学习。

关于一些解释我就写在下面的代码块中了哈!

//https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js


//def方法是基于Object.defineProperty封装的一层方法,很简单,我会在下面把代码贴出来,免得大家去找了。
import { def } from '../util/index' 

//保存下原生的数组原型对象
const arrayProto = Array.prototype

//进行原型连接,将arrayMethods的原型指向Array.prototype
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) {
  // 缓存原生的方法
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    var args = [], 
    len = arguments.length;
    while (len--) args[len] = arguments[len];
    const result = original.apply(this, args) // 原来的数组方法执行结果
    const ob = this.__ob__ // 这个__ob__就是Observe的实例~~~~
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted) // 如果数组有变化,则重新调用observeArray
    // notify change
    ob.dep.notify()  //
    return result
  })
})

这个是关于Observe的代码:

var Observer = function Observer(value) {
    this.value = value;
    this.dep = new Dep();
    this.vmCount = 0;
    def(value, '__ob__', this);  //这里会看到在每个对象数据上都会绑定一个Observe的实例,所以上面代码中的this.__ob__就是这个
    if (Array.isArray(value)) { // 这里判断是否是数组类型的数据,如果是的话就走observeArray
      if (hasProto) {
        protoAugment(value, arrayMethods);
      } else {
        copyAugment(value, arrayMethods, arrayKeys);
      }
      this.observeArray(value); //这里就是处理数组类型的数据,如下
    } else {
      this.walk(value);
    }
  };

如下是observeArray的实现:

Observer.prototype.observeArray = function observeArray(items) {
    for (var i = 0, l = items.length; i < l; i++) {
      observe(items[i]); // 这个observe方法如下
    }
  };

在这里我们看下observe这个方法:

function observe(value, asRootData) {
    if (!isObject(value) || value instanceof VNode) {
      return
    }
    var ob;
    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
      ob = value.__ob__;
    } else if (
      shouldObserve &&
      !isServerRendering() &&
      (Array.isArray(value) || isPlainObject(value)) &&
      Object.isExtensible(value) &&
      !value._isVue
    ) {
      ob = new Observer(value);
    }
    if (asRootData && ob) {
      ob.vmCount++;
    }
    return ob
  }

这个是关于def方法的实现,很简单我就不说了哈:

function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
      value: val,
      enumerable: !!enumerable,
      writable: true,
      configurable: true
    });
}

以上就是关于vue中如何监听数组变化的详细内容,更多关于vue如何监听数组的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue如何清除浏览器历史栈
May 25 Vue.js
vue实现简单数据双向绑定
Apr 28 #Vue.js
vue引入Excel表格插件的方法
Apr 28 #Vue.js
原生JS封装vue Tab切换效果
vue项目两种方式实现竖向表格的思路分析
vue首次渲染全过程
浅谈vue2的$refs在vue3组合式API中的替代方法
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
You might like
php中$this-&amp;gt;含义分析
2009/11/29 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
Python的print用法示例
2014/02/11 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
四种会话跟踪技术
2015/05/20 面试题
留学推荐信中文范文三篇
2014/01/25 职场文书
小学生获奖感言范文
2014/02/02 职场文书
统计岗位职责
2014/02/21 职场文书
小学生常见病防治方案
2014/06/06 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
力克胡哲观后感
2015/06/10 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
python基础之类属性和实例属性
2021/10/24 Python