文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue中怎么监听数组变化

2023-06-14 22:32

关注

这篇文章主要介绍了vue中怎么监听数组变化,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架,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.prototypeexport 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中怎么监听数组变化”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯