当前位置: 首页 > news >正文

说一下vue2的响应式原理?

vue2采用数据代理+数据劫持+发布订阅模式的方法。

在初始化vue实例时,会把data对象和data对象的属性都添加到vm对象中,通过object.defineProperty()进行数据代理,用vm对象的属性来代理data对象的属性,并在Observer类中递归遍历data对象,对data对象中的每个属性都进行数据劫持,都指定一个getter、setter。

例外的,对于数组,不能通过object.defineProperty()进行数据代理,因为监听的数组下标变化时会出现数据错乱问题,所以数组是调用数组重写的原生方法来实现响应式。

当通过vm对象修改data对象中的属性时,会触发data属性的setter方法,然后触发它Dep实例的notify方法进行依赖分发,通知所有依赖的Watcher实例执行内部回调函数。最后会触发renderWatcher回调,会重新执行render函数,重新对比新旧虚拟DOM,重新渲染页面。【Watcher回调是异步任务,它的执行会遵循事件循环机制,且重复的Watcher回调不会放到任务队列中,所以多次重复数据更新时,只会重新渲染一次页面】。

当通过vm对象读取data对象中的属性时,会触发data属性的getter方法,然后触发它Dep实例的depend方法进行依赖收集。

当data对象中数组元素发生变化时,会调用数组重写的原生方法,然后触发它Dep实例的notify方法进行依赖分发,通知所有依赖的Watcher实例执行内部回调函数。最后会触发renderWatcher回调,会重新执行render函数,重新对比新旧虚拟DOM,重新渲染页面。

当读取data对象中数组元素时,会触发数组的getter方法,然后触发它Dep实例的depend方法进行依赖收集。

相关文章:

说一下vue2的响应式原理?

vue2采用数据代理数据劫持发布订阅模式的方法。 在初始化vue实例时,会把data对象和data对象的属性都添加到vm对象中,通过object.defineProperty()进行数据代理,用vm对象的属性来代理data对象的属性,并在Observer类中递归遍历data…...

如何使用CORS和CSP保护前端应用程序安全

前端应用在提供无缝用户体验方面起着核心作用。在当今互联网的环境中,第三方集成和API的普及使得确保强大的安全性至关重要。安全漏洞可能导致数据盗窃、未经授权访问以及品牌声誉受损。本文将向您展示如何使用CORS和CSP为您的网页增加安全性。 嗨,大家好…...

C/C++输出硬币翻转 2021年6月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录 C/C硬币翻转 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C硬币翻转 2021年6月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 假设有N个硬币(N为不大于5000的正整数),从1…...

ipad可能会在iOS 16中失去智能家居中心功能

在iOS 16测试版代码中发现的文本表明苹果将放弃对iPad家庭中心的支持 家庭app迎来重大改版,未来更将对智能家居互联互通标准Matter提供支持。 即使某一款智能家居设备再优秀,只要它没有接入HomeKit,那么就不能在苹果的家庭app中直接管理控制。…...

maven打包可运行jar

普通java程序 <build><finalName>JavaDeviceClient</finalName><plugins><plugin><artifactId>maven-compiler-plugin</artifactId><version>2.3.2</version><configuration><source>1.8</source><…...

Arcgis连接Postgis数据库(Postgre入门十)

效果 步骤 1、矢量数据首先有在postgis数据库中 这个postgis数据库中的一个空间数据&#xff0c;数据库名称是test3&#xff0c;数据表名称是test 2、Arcgis中连接postgis数据库中 3、成功连接 可以将数据拷贝或导入到gdb数据库中...

【蓝桥杯选拔赛真题17】C++时间换算 第十二届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析

目录 C/C++时间换算 一、题目要求 1、编程实现 2、输入输出 二、算法分析 <...

【腾讯云 HAI域探秘】探索AI绘画之路:利用腾讯云HAI服务打造智能画家

目录 前言1 使用HAI服务作画的步骤1.1 注册腾讯云账户1.2 创建算力服务器1.3 进入模型管理界面1.4 汉化界面1.5 探索AI绘画 2 模型参数的含义和调整建议2.1 模型参数的含义和示例2.2 模型参数的调整建议 3 调整参数作画的实践和效果3.1 实践说明3.2 实践效果13.3 实践效果23.4 …...

安卓常见设计模式10------责任链模式(Kotlin版)

1. W1 是什么&#xff0c;什么是责任链模式&#xff1f;​ 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式&#xff0c;它用于将请求的发送者和接收者解耦&#xff0c;并将请求沿着一个处理链进行传递&#xff0c;直到有一个处理者能…...

利用 Google Artifact Repository 构建maven jar 存储仓库

参考了google 官方文档 https://cloud.google.com/artifact-registry/docs/java/store-java#gcloud_1 首先 enable GAR api gcloud services enable artifactregistry.googleapis.com gcloud services list | grep -i artifact artifactregistry.googleapis.com Artifac…...

Facebook广告被暂停是什么原因?Facebook广告账号被封怎么办?

许多做海外广告投放的小伙伴经常遇到一个难题&#xff0c;那就是投放的Facebook广告被拒或 Facebook 广告帐户被关闭赞停的经历&#xff0c;随之而来的更可能是广告账户被封&#xff0c;导致资金的损失。本文将从我自身经验&#xff0c;为大家分享&#xff0c;Facebook广告被暂…...

Javaweb之javascript的BOM对象的详细解析

1.5.2 BOM对象 接下来我们学习BOM对象&#xff0c;BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能&#xff0c;可以通过操作BOM对象的相关属性或者函数来完成。例如&#xff1a…...

使用Nginx和Spring Gateway为SkyWalking的增加登录认证功能

文章目录 1、使用Nginx增加认证。2、使用Spring Gateway增加认证 SkyWalking的可视化后台是没有用户认证功能的&#xff0c;默认下所有知道地址的用户都能访问&#xff0c;官网是建议通过网关增加认证。 本文介绍通过Nginx和Spring Gateway两种方式 1、使用Nginx增加认证。 生…...

Android 12.0 增加多张图片作为系统静态壁纸的功能实现

1.前言 在12.0的系统rom定制化开发中,在做系统定制化开发中,在对系统的静态壁纸做定制的时候,需要增加几种静态壁纸可以让用户自己设置壁纸,所以可以在壁纸的系统应用中 添加几种静态壁纸图片,然后配置好 就可以在选择壁纸的时候,作为静态壁纸,接下来看如何具体实现这个…...

无线优化之RRM模板

一、简介 RRM即,Radio Resource Management,射频资源管理 WLAN技术是以射频信号(如2.4G/5G的无线电磁波)作为传输介质,无线电磁波在传输过程中因周围环境导致无线信号衰减,从而影响无线用户上网的服务质量。 RRM模板主要用于保持最优的频射资源状态,自动检查周围无线…...

BI 数据可视化平台建设(1)—交叉表组件演变实战

作者&#xff1a;vivo 互联网大数据团队 - Zhu Jianchen 本文是vivo互联网大数据团队《BI数据可视化平台建设》系列文章第1篇 - 交叉表组件。 交叉表在数据分析里应用广泛&#xff0c;通过本文&#xff0c;你将了解到&#xff1a; 交叉表的基本概念&#xff0c;以及BI可视化平…...

Python---练习:求幸运数字6

案例&#xff1a; 幸运数字6&#xff08;只要是6的倍数&#xff09;&#xff1a;输入任意数字&#xff0c;如数字8&#xff0c;生成nums列表&#xff0c;元素值为1~8&#xff0c;从中选取幸运数字移动到新列表lucky&#xff0c;打印nums与lucky。 思考&#xff1a; 要求是6的…...

【云栖2023】王峰:开源大数据平台3.0技术解读

本文根据2023云栖大会演讲实录整理而成&#xff0c;演讲信息如下&#xff1a; 演讲人&#xff1a;王峰 | 阿里云研究员&#xff0c;阿里云计算平台事业部开源大数据平台负责人 演讲主题&#xff1a;开源大数据平台3.0技术解读 实时化与Serverless是开源大数据3.0时代的必然选…...

如何改变Wi-Fi的IP地址,提高网络连接稳定性和速度

Wi-Fi已经成为我们日常生活中必不可少的一部分。大多数家庭和办公室都依赖于Wi-Fi来连接网络和进行各种在线活动。然而&#xff0c;有时我们可能会遇到网络连接不稳定或速度较慢的问题。这可能是由于IP地址的设置不当所导致的。虎观代理小二二将向您介绍如何改变Wi-Fi的IP地址&…...

APP 备案公钥、签名 MD5、SHA-1、SHA-256获取方法。

公钥和 MD5 值可以通过安卓开发工具、Keytool、Jadx-GUI 等多种工具获取&#xff0c;最简单的就是以 appuploader为例。 1.下载 appuploader工具 &#xff0c;点击此处 下载 appuploader 工具。 2.下载完成后&#xff0c;解压压缩包&#xff0c;双击 appuploder 运行。 3.运…...

Cadence Allegro 17.4 建库避坑指南:从PAD丢失到Pin One属性,新手常踩的5个雷

Cadence Allegro 17.4 建库避坑指南&#xff1a;从PAD丢失到Pin One属性&#xff0c;新手常踩的5个雷 刚接触Cadence Allegro的硬件工程师&#xff0c;在建库过程中总会遇到各种"坑"。这些看似简单的问题&#xff0c;往往让人耗费数小时却找不到解决方案。本文将针对…...

Maxwell Simplorer Simulink 永磁同步电机矢量控制联合仿真

maxwell simplorer simulink 永磁同步电机矢量控制联合仿真&#xff0c;电机为分数槽绕组&#xff0c;使用pi控制SVPWM调制&#xff0c;修改文件路径后可使用&#xff0c;软件版本matlab 2017b, Maxwell electronics 2021b 共包含两个文件&#xff0c; Maxwell和Simplorer联合仿…...

GameFramework资源加载深度解析:从任务池调度到对象池缓存的完整链路

1. GameFramework资源加载机制概览 第一次接触GameFramework的资源管理系统时&#xff0c;我被它精巧的设计所震撼。这套系统完美解决了游戏开发中最头疼的问题之一&#xff1a;如何高效管理成千上万的游戏资源。想象你正在开发一个开放世界游戏&#xff0c;场景中有数百个角色…...

终极指南:如何用Meshroom开源工具将普通照片变成专业3D模型

终极指南&#xff1a;如何用Meshroom开源工具将普通照片变成专业3D模型 【免费下载链接】Meshroom Node-based Visual Programming Toolbox 项目地址: https://gitcode.com/gh_mirrors/me/Meshroom 想将手机照片一键变成可旋转、可触摸的3D模型吗&#xff1f;&#x1f6…...

Acunetix安装后第一步做什么?新手避坑指南与Pikachu靶场扫描实战

Acunetix安装后第一步做什么&#xff1f;新手避坑指南与Pikachu靶场扫描实战 当你第一次打开Acunetix时&#xff0c;面对满屏的专业术语和复杂功能&#xff0c;很容易陷入"我该从哪里开始&#xff1f;"的困惑。这篇文章将带你跨过从安装完成到首次成功扫描的关键一步…...

从HFSS到ADS:射频工程师的仿真工具箱里,2009版ADS到底该怎么用?

从HFSS到ADS&#xff1a;射频工程师的仿真工具箱深度解析 在射频设计领域&#xff0c;工程师们常常面临一个关键抉择&#xff1a;面对特定设计任务时&#xff0c;究竟该选择HFSS还是ADS&#xff1f;这个问题没有标准答案&#xff0c;却直接影响着设计效率与结果精度。本文将带你…...

【微软内部验证通过】:C# 14 原生 AOT 部署 Dify 客户端的5步黄金流程,从本地构建到K8s Pod就绪仅需83秒

第一章&#xff1a;C# 14 原生 AOT 部署 Dify 客户端生产环境部署总览C# 14 原生 AOT&#xff08;Ahead-of-Time&#xff09;编译能力显著提升了 .NET 应用在边缘与云原生场景下的启动性能与资源占用表现。当用于封装 Dify 的 RESTful 客户端时&#xff0c;AOT 可将 C# 客户端代…...

一键部署Qwen3-ASR-0.6B:轻量级语音识别模型,支持流式推理

一键部署Qwen3-ASR-0.6B&#xff1a;轻量级语音识别模型&#xff0c;支持流式推理 1. 引言&#xff1a;为什么选择Qwen3-ASR-0.6B 语音识别技术正在快速普及&#xff0c;从智能家居到客服系统&#xff0c;从会议记录到实时字幕&#xff0c;应用场景越来越广泛。Qwen3-ASR-0.6…...

我用codex( GPT-5.4) 写代码一个多月后,突然开始害怕自己的项目了

我用 GPT-5.4 写代码一个多月后&#xff0c;突然开始害怕自己的项目了最近半年&#xff0c;我开发项目几乎 完全依赖 GPT-5.4。 写接口、写业务逻辑、写 SQL、写脚本、写测试代码&#xff0c; 甚至连 Jenkins Pipeline、Dockerfile、部署脚本都直接让 AI 生成。 效率确实很夸张…...

2026大模型学习路线:从零基础到落地实战,一篇打通转型全路径

2026年&#xff0c;大模型产业正从“概念狂热”走向“工程落地”的深水区&#xff0c;企业对人才的要求不再是“懂原理”&#xff0c;而是“能解决业务问题”。无论是零基础小白、传统程序员&#xff0c;还是35职场人&#xff0c;只要掌握RAG、Agent、轻量化微调三大核心技能&a…...