首页 > 编程语言 >vue中如何检测数组变化(vue基础,面试,源码级讲解)

vue中如何检测数组变化(vue基础,面试,源码级讲解)

时间:2024-10-14 23:17:21浏览次数:8  
标签:劫持 vue 方法 源码 原型 数组 讲解 重写

大家有什么不明白的地方可以分享在评论区,大家一起探讨哦~~

(如果对数据劫持还有所不明白的小伙伴,可以去看看上一篇文章哦)

在vue2中,是如何对数组进行劫持的呢?

简单代码实现:

 在vue2中,不会对数组的每一项数据进行递归Object.defineProperty()方法劫持,这样是很浪费性能的。而是会重写数组方法(js数组中常用的那七种方法)来进行劫持。

当数据为数组时,修改数组的原型为新数组原型(newsArrayProto),而newsArrayProto是在原来的基础上对数组方法进行了加工重写(看代码中的16-21行)。

那我们来看看源码吧!

源码:baseHandlers.ts - vuejs/core - GitHub1s

 可以看到,在画红线的地方进行判断是否为数组类型(多余的代码不必纠结,感兴趣的小伙伴可以自己去推敲)。

在59行判断是否支持原型,因为要考虑兼容性的问题。

支持时,61行中将原数组原型修改为加工好的新数组原型,arrayMethods就是已经将数组方法重写好了的数组原型;不支持的话,采用循环的方式,重写修改每一项数组数据的数组方法。

在71行,调用方法,还会继续遍历递归数组中的每一项数据,判断是否有数据为对象或数组类型。

如果是基本数据类型,随着大箭头的方向,来到最顶部就会结束了。

代码如下:

标签:劫持,vue,方法,源码,原型,数组,讲解,重写
From: https://blog.csdn.net/qq_62541773/article/details/142930152

相关文章

  • ArrayList源码分析(底层数据结构,成员变量,构造方法)以及面试题(基于JDK1.8)
    要分析Arraylist,我们首先要从它的底层数据结构实现出发,再结合其底层源码,可能能让读者理解的更加深刻一点。1,底层数据结构(数组)Arraylist底层是基于动态数组实现的。数组是一种使用连续储存空间储存相同数据类型的线性数据结构。面试题1为什么数组索引从0开始不从1开始?分......
  • java数组讲解
    前言:由上两章,我们已经了解关于java的基础语法,这章我们将讲解数组的相关语法,坐好了没,我们准备要发车啦!!!我们将从五部分给大家讲解:1数组的基本概念2.数组是引用类型3.数组的应用场景4.数组的练习5.二维数组1数组的基本概念:1.1 为什么要使用数组1.存储多个相同类型的......
  • Vue 3 和 TypeScript 项目中使用 i18n
    在Vue3和TypeScript项目中使用i18n(国际化)可以通过vue-i18n插件来实现。步骤1:安装依赖首先,你需要安装vue-i18n:npminstallvue-i18n步骤2:创建语言文件在项目中创建一个文件夹(如src/i18n),并在其中创建语言文件。比如,创建en.json和zh.json:src/i18n/en.json{......
  • 基于SpringBoot的家政服务预约小程序系统设计和实现(源码+论文)
    目录:目录:博主介绍: 完整视频演示:你应该选择我技术栈介绍:需求分析:系统各功能实现一览:1.注册2.登录部分代码参考: 项目功能分析: 项目论文:源码获取:博主介绍: ......
  • 基于SpringBoot的实时音乐推荐与社交互动可视化平台设计和实现(源码+论文+部署讲解等)
     目录:目录:博主介绍: 完整视频演示:你应该选择我技术栈介绍:需求分析:系统各功能实现一览:1.注册2.登录部分代码参考: 项目功能分析: 项目论文:源码获取:博主介绍: ......
  • Vue2+ECharts+Mock.js实现前端后台通用管理系统页面
    一、前言  在现代Web开发中,前端框架与数据可视化工具的结合能够显著提升用户体验。本文将介绍如何使用Vue2和ECharts构建一个通用的后台管理系统页面。利用Vue2的组件化特性,可以高效管理应用状态与UI交互,而ECharts则提供多样的图表类型,便于展示数据分析结果。通过整合这两......
  • 基于Spring boot的大学生选课信息可视化系统设计和实现(源码+论文+部署讲解等)
    博主介绍: ......
  • 基于Spring boot的智慧城市中的自动化交通管理平台设计和实现(源码+论文)
    目录:目录:博主介绍: 完整视频演示:你应该选择我技术栈介绍:需求分析:系统各功能实现一览:1.注册2.登录部分代码参考: 项目功能分析: 项目论文:源码获取:博主介绍: ......
  • Free5GC源码研究(5) - NRF研究
    本文研究NetworkRepositoryFunction(NRF)主要实现的功能NRF的概念NRF在5G网络架构中有着中心意义——所有NF在刚上线时就要向网络中的NRF报告自己的存在,告知NRF自己的基本信息,同时在即将下线时也要像NRF报告自己的不存在;而某个NF想要调用其他NF的功能时,需要向NRF询问网络......
  • vue-java分享源码基于Spring Boot框架的学生作业课程管理系统的设计与实现
    目录功能和技术介绍系统实现截图本项目源码获取地址下载开发核心技术介绍:为什么选择最新的Vue与SpringBoot技术核心代码部分展示功能和技术介绍SpringBoot和Vue作为当前主流的技术框架,具有开发效率高、安全性强、用户体验良好等优点。使用开源的SpringBoot框架进行......