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

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

今天我们就来研究下。

在哪里收集依赖

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

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

变化监测

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

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

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

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


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

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

使用拦截器

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

就是在这一行生效的。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

10个图像处理的Python库

在这篇文章中,我们将整理计算机视觉项目中常用的Python库,如果你想进入计算机视觉领域,可以先了解下本文介绍的库,这会对你的工作很有帮助。 1、PIL/Pillow Pillow是一个通用且用户友好的Python库,提供了丰富的函数集…

QT day1简单登录界面

widget.cpp文件代码&#xff1a; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget) {qDebug()<<this->size();qDebug()<<this->frameSize();this->setFixedSize(50…

如何用Python搭建监控平台

监控和运维&#xff0c;是互联网工业链上非常重要的一环。监控的目的就是防患于未然。通过监控&#xff0c;我们能够及时了解到企业网络的运行状态。一旦出现安全隐患&#xff0c;你就可以及时预警&#xff0c;或者是以其他方式通知运维人员&#xff0c;让运维监控人员有时间处…

MATLAB 之 可视化图形用户界面设计

这里写目录标题 一、可视化图形用户界面设计1. 图形用户界面设计窗口1.1 图形用户界面设计模板1.2 图形用户界面设计窗口 2. 可视化图形用户界面设计工具1.1 对象属性检查器2.2 菜单编辑器2.3 工具栏编辑器2.4 对齐对象工具2.5 对象浏览器2.6 Tab 键顺序编辑器 3. 可视化图形用…

多元分类预测 | Matlab基于北方苍鹰优化深度置信网络(NGO-DBN)的分类预测,多输入模型,NGO-DBN分类预测

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元分类预测 | Matlab基于北方苍鹰优化深度置信网络(NGO-DBN)的分类预测,多输入模型,NGO-DBN分类预测 多特征输入单输出的二分类及多分类模型。程序内注释详细,直接替换数据就可以用。程序语言为matlab,程序可…

地下饮用水除硝酸盐技术、生活用水提质增效

项目名称 北京某地下水除硝酸盐项目&#xff0c;出水未检出 工艺选择 两处水源&#xff0c;运行方式为一用一备 工艺原理 树脂官能团耐受硫酸盐、氯离子的干扰&#xff0c;实现选择性吸附硝酸根 项目背景 近年来由于农业活动及排污物的影响&#xff0c;部分地表…

【STM32】STM32G系列使用CORDIC模块加速计算

1.前言 STM32G431系列产品内置了CORDIC运算单元&#xff0c;可以用来加速数学计算&#xff0c;如三角函数、取模、开方等。适合大量数据进行相同的运算操作。配合DMA可以大大节省CPU计算开销。 2.CubeMX配置 使用CORDIC模块无需配置参数&#xff0c;若采用DMA方式则只需配置…

多元分类预测 | Matlab基于灰狼优化深度置信网络(GWO-DBN)的分类预测,多特征输入模型,GWO-DBN分类预测

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元分类预测 | Matlab基于灰狼优化深度置信网络(GWO-DBN)的分类预测,多特征输入模型,GWO-DBN分类预测 多特征输入单输出的二分类及多分类模型。程序内注释详细,直接替换数据就可以用。程序语言为matlab,程序可…

如何提高OAK相机在树莓派和JETSON上的运行帧率?

编辑&#xff1a;OAK中国 首发&#xff1a;oakchina.cn 喜欢的话&#xff0c;请多多&#x1f44d;⭐️✍ 内容可能会不定期更新&#xff0c;官网内容都是最新的&#xff0c;请查看首发地址链接。 Hello&#xff0c;大家好&#xff0c;这里是OAK中国&#xff0c;我是助手君。 最…

【嵌入式Qt开发入门】如何使用Qt进行绘制实时图表——QChart 图表

要想使用 Qt Charts&#xff0c;我们的 Qt 版本得使用 Qt 5.7 之后的版本。其实 Qt Charts 并不是 Qt 5.7 才有的&#xff0c;是在 Qt 5.7 以前只有商业版本的 Qt 才有 Qt Charts。我们能免费下载的 Qt 版本都是社区&#xff08;开源&#xff09;版本。 Qt Charts 很方便的绘制…

密码学入门——DES与AES

文章目录 参考书目一、编码与异或1.1 编码1.2 异或 二、DES与三重DES三、AES 参考书目 图解密码技术&#xff0c;第三版 一、编码与异或 1.1 编码 计算机的操作对象并不是文字&#xff0c;而是由0和1排列而成的比特序列。无论是文字、图像、声音、视频还是程序&#xff0c;…

win系统删除oracle数据文件恢复---惜分飞

有客户联系我们,说win平台下的数据库,在由于空间紧张,在关闭数据库的情况下删除的两个数据文件,导致数据库无法正常访问很多业务表,需要对其进行恢复,查看alert日志发现大概操作,删除文件之后,启动数据库失败 Completed: alter database mount exclusive alter database open E…

【案例实战】SpringBoot整合Redis的GEO实现查找附近门店功能

像我们平常美团点外卖的时候&#xff0c;都会看到一个商家距离我们多少米。还有类似QQ附近的人&#xff0c;我们能看到附近的人距离我们有多少米。 那么这些业务是怎么做的呢&#xff1f;是如何实现 基于位置的附近服务系统呢。 在去了解基于位置的附近服务之前&#xff0c;我…

个人域名邮箱无法给gmail发邮件

问题描述 我注册了一个域名 mydomain.com, 并在此域名下创建了 mailbox&#xff0c;从该邮箱向外发送邮件和接收邮件会失败。 主要是一些配置工作没有做好。 接收邮件 当创建邮箱 xxxmydomain.com&#xff0c;尝试向该邮箱发送邮件时&#xff0c;邮件会被拒收&#xff0c;并…

在Linux中安装RabbitMQ

RabbitMQ下载网址 Socat下载网址 erlang下载网址 RabbitMQ安装包依赖于Erlang语言包的支持&#xff0c;所以需要先安装Erlang语言包&#xff0c;再安装RabbitMQ安装包 通过Xftp软件将这三个压缩包上传到linux中的opt目录下 ,双击即可 在安装之前先查询…

Css基础:盒子模型

1.盒子模型的构成&#xff1a; 边框 外边距 内边距 实际内容 2.table表格的单元格之间的线太粗需要border-collapse:collapse;合并一下边框宽度 3.内边距 padding 4.外边距 margin 块元素水平居中的做法&#xff0c;margin:0 auto; 行内元素和行内块元素 水平居中做…

【Jenkins】Jenkins构建后端流水线

目录 一、新建任务1、输入任务名称&#xff0c;选择构建项目类型&#xff08;这里我选择的是Maven项目&#xff09;&#xff0c;任务名称一般格式为&#xff1a;项目名称-前后端2、创建成功后的结果 二、配置流水线1、进入刚创建好的任务页面中&#xff0c;点击配置2、General配…

快速入门uniapp——从环境搭建到项目实践

&#x1f642;博主&#xff1a;小猫娃来啦 &#x1f642;文章核心&#xff1a;快速入门uniapp——从环境搭建到项目实践 文章目录 初步介绍UniApp开发环境搭建下载和安装UniApp开发工具创建新项目&#xff08;HBuilderX&#xff09;开发工具界面介绍 UniApp基础知识页面结构页面…

SQLite Expert Professional将ACCESS数据库文件导入到SQLITE

一、下载与安装 下载对应的位数的SQLite Expert&#xff1a;http://www.sqliteexpert.com/download.html &#xff0c;建议下载professional版本的&#xff0c;功能更加强大。 如果官网进不去可以到百度云下载&#xff1a;https://pan.baidu.com/s/17igndAqQ7SQ57LcjwS4WIQ …

原型模式:如何最快速地clone一个HashMap散列表?

我们还像学习建造者模式一样 思考 什么是原型模式&#xff1f;主要解决哪些问题&#xff1f; 如果对象的创建成本比较大&#xff0c;而同一个类的不同对象之间差别不大&#xff08;大部分字段都相同&#xff09;&#xff0c;在这种情况下&#xff0c;我们可以利用对已有对象…