vue对于数组的数据监听变化和object是不一样的吗?

news2024/11/13 9:03:59

我们知道vue对于数组的数据监听变化和object是不一样的,因为我们常说的Object.defineProperty是对象上面的方法,所以对于array数组需要实现另外一套变化侦测机制。

今天我们就来研究下。

在哪里收集依赖

array数据设计了新的变化侦测机制,但是基本思路是不变的,就是在获取数据时收集依赖,数据变化时通知依赖更新。

所以这个收集机制和对象object是一样的,在获取到初始化数据data的时候,判断如果是数组然后就使用数组的依赖收集函数。

变化监测

对于object我们可以通过setter来追踪的,我们数组没有setter怎么办,可以想想,我们想让数组发生变化,一般都是使用数组上面的方法。

我们就可以把数组上面这些方法都重写一遍,在不改变原有功能的前提下,我们为其增加一些其他功能。

这个就在observer目录下面的array.ts。

这个是数组上面支持的方法。


下面就是把数组方法遍历一遍,然后增加拦截器,

这样就可以在我们修改数据的时候监测到数据发生变化,然后通知dep进行更新。

使用拦截器

在上面我们把拦截器挂到了数组实例和Array.prototype之间,这样拦截器才能生效。

就是在这一行生效的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/733852.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

阿里云服务器架构X86计算、ARM、GPU/FPGA、裸金属和超级计算集群

阿里云服务器架构有什么区别?X86计算、ARM计算、GPU/FPGA/ASIC、弹性裸金属服务器、超级计算集群有什么区别?阿里云服务器网分享云服务器ECS架构详细说明: 目录 阿里云服务器ECS架构说明 X86计算 ARM计算 GPU/FPGA/ASIC 弹性裸金属服务…

第八章:L2JMobius学习 – 游戏服务GameServer讲解

本章节我们来讲解GameServer服务,首先来查看它的文件结构 ai:游戏角色自动化处理,比如说,自动攻击。 cache:数据缓存,里面就一个HtmCache.java类,缓存HTML文件内容。 communitybbs:b…

【C语言】1-Visual C++ 2010 的简单使用和第一个 C 语言程序

1. Visual C++ 2010 的简单使用 1.1 面板介绍 1.2 新建C语言项目 打开 Visual C++ 2010,点击 New Project 根据下面的图示进行操作,其中需要注意 ③:这里输入的为项目名(建议和我的命名保持一致) ④:这里是项目存放的位置,可以自己选择,最好不要有中文路径(只要是使…

苹果用户要留意?女子FaceTime通话面临巨额骗局,损失高达160万

FaceTime通话是苹果提供的一项服务,可以让使用iOS、iPadOS设备或Mac电脑的用户进行视频或音频通话。只要知道对方的Apple ID,世界各地的苹果设备都可以通过该ID进行呼叫。 据报道,一名居住在上海金山的女性最近遭受了一种新型诈骗&#xff0c…

js逆向补环境-调试工具vscode与nodejs使用之无环境联调

目录 一、啊哈一、Nodejs安装1、nodejs最新版本的安装(windows)2、旧版nodejs更新成最新版本(windows)3、nodejs安装(linux) 二、vscode安装使用(windows)1、下载安装vscode2、vscode运行插件Code Runner安…

多元分类预测 | Matlab基于K近邻算法(KNN)的数据分类预测,多特征输入模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 基于K近邻算法(KNN)的数据分类预测,多特征输入模型 多特征输入单输出的二分类及多分类模型。程序内注释详细,直接替换数据就可以用。程序语言为matlab,程序可出分类效果图,迭代优化图,混淆矩阵图。 部分源码

MAYA粒子爆炸

创建粒子替代 中心归零 只有一种石头 particleShape1.shitourand(0,5); 设置石头大小 等比例变小 particleShape1.daxiao<<0.2,0.2,0.2>>; 使用变量代替 float $daxiaorand(0.2,0.5); particleShape1.daxiao<<$daxiao,$daxiao,$daxiao>>; 非等比例缩…

【国家标准】GB 7713-87 科学技术报告、学位论文和学术论文编写格式

目 录 1 引言 2 定义 2.1 科学技术报告 2.2 学位论文 2.3 学术论文 3 编写要求 4 编写格式 5 前置部分 5.1 封面 5.2 封二 5.3 题名页 5.4 变异本 5.5 题名 5.6 序或前言 5.7 摘要 5.8 关键词 5.9 目次页 6 主体部分 6.1 格式 6.2 序号 6.3 引言(或绪论)…

基于stm32单片机的智能家居环境监控系统

​一.硬件方案 智能家居环境监控系统的整体电路主要由stm32单片机最小系统&#xff0c;光MQ-2烟雾传感器电路&#xff0c;红外人体检测电路&#xff0c;DS18B20温度传感器&#xff0c;LCD1602显示电路&#xff0c;水泵驱动电路&#xff0c;风扇驱动电路&#xff0c;LED指示灯&…

传输方式的分类【图解TCP/IP(笔记五)】

文章目录 传输方式的分类面向有连接型和无连接型面向有连接型面向无连接型 电路交换与分组交换根据接收端数量分类单播&#xff08;Unicast&#xff09;广播&#xff08;Broadcast&#xff09;多播&#xff08;Multicast&#xff09;任播&#xff08;Anycast&#xff09; 传输方…

ModaHub魔搭社区:Zilliz Cloud快速开始教程(一)

目录 前提条件 创建 Collection 查看 Collection 插入数据 本教程涵盖以下 Zilliz Cloud 集群操作指南: 创建 Collection查看 Collection插入数据向量搜索、向量查询、通过 ID 获取 Entity删除 Entity删除 Collection 前提条件 在本文档中,我们将使用 Milvus 的 SDK。…

FL Studio21中文版DAW宿主软件

FL Studio21让你的计算机就像是全功能的录音室&#xff0c;漂亮的大混音盘&#xff0c;先进的创作工具&#xff0c;让你的音乐突破想象力的限制。你有着满腔的音乐才华&#xff0c;想要自己在家里发片吗&#xff1f;还是听 MOBY 的电子舞曲不过瘾&#xff0c;要再帮他做做 REMI…

Mybatis-plus——增删改查相关+id生成策略+多数据操作(删除)+逻辑删除+乐观锁+代码生成器

项目文件总览 Dao层中 domain层中 测试类中含有三个测试方法&#xff0c;分别对应&#xff0c;插入删除和修改 id生成策略 针对不同的场景使用不同的id,用到提供的一个注解TableId 在实体类中使用Tablefiled注解时可以看见有如下的多种策略 使用第一个AUTO策略 运行插入方法得…

Nuxt3 loyouts公共页面布局

1.目录结构 2.在app.vue入口处添加代码 注意&#xff1a;Header首字母我是大写的&#xff0c;然而页面并没有显示头部&#xff0c;只显示尾部 改为首字母小写才会有效

SWAT模型18项典型案例实践、EFDC模型建模方法

SWAT模型“十八般武艺”高阶研修 以18项典型的案例为主线&#xff0c;不仅能够从技术层系统掌握&#xff0c;还能更好的拓展与相关学科的融合创新应用&#xff0c;解决实际的问题&#xff0c;内容讲解具有技术深度与系统、普遍需求、热点创新、实际问题解决等特点&#xff0c;…

计算机组成原理课程论文: Intel 80386/80486 的体系架构调研

摘要 本文以Intel 80386/80486体系架构为研究对象&#xff0c;详细介绍了该体系架构的基本概念、特点和优势&#xff0c;分析了其在不同领域的应用情况&#xff0c;并对其未来的发展做出一定的展望和评价。 首先&#xff0c;我们介绍了研究背景和目的&#xff0c;阐述了Intel 8…

40. 同时在线最多的人数

文章目录 题目需求思路一实现一题目来源 题目需求 根据用户登录明细表&#xff08;user_login_detail&#xff09;&#xff0c;求出平台同时在线最多的人数。 期望结果如下&#xff08;截取部分&#xff09;&#xff1a; cn7 需要用到的表&#xff1a; 用户登录明细表&…

接口性能优化技巧

背景 我负责的系统在去年初就完成了功能上的建设&#xff0c;然后开始进入到推广阶段。随着推广的逐步深入&#xff0c;收到了很多好评的同时也收到了很多对性能的吐槽。 刚刚收到吐槽的时候&#xff0c;我们的心情是这样的&#xff1a; 当越来越多对性能的吐槽反馈到我们这里的…

阿里云服务器架构X86_GPU_裸金属_超级计算集群详解

阿里云服务器架构有什么区别&#xff1f;X86计算、ARM计算、GPU/FPGA/ASIC、弹性裸金属服务器、超级计算集群有什么区别&#xff1f;阿里云服务器网分享云服务器ECS架构详细说明&#xff1a; 目录 阿里云服务器ECS架构说明 X86计算 ARM计算 GPU/FPGA/ASIC 弹性裸金属服务…

基于simulink使用SAD方法进行运动检测(附源码)

一、前言 此示例演示如何使用绝对差分总和 &#xff08;SAD&#xff09; 方法来检测视频序列中的运动。此示例将 SAD 独立应用于视频序列的四个象限。如果在象限中检测到运动&#xff0c;则示例会以红色突出显示该象限。 二、模型 下图显示了移动侦测示例模型&#xff1a; 三…