vue 响应式数据原理
发现宝藏
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。
Vue 的响应式数据原理是其核心功能之一,它使得 Vue 应用能够自动响应数据的变化,并在数据变化时自动更新视图。这个机制通过 数据劫持(data hijacking)和 发布-订阅模式 实现,下面我将详细解释 Vue 响应式数据原理。
1. 数据劫持 (Data Hijacking)
Vue 的响应式数据机制基于浏览器的 Object.defineProperty,通过数据劫持将对象的每个属性转化为 getter 和 setter。当你访问某个属性时,getter 会被触发;当你修改该属性的值时,setter 会被触发。
实现过程:
-
对象属性代理:
当 Vue 初始化数据时,它会遍历每个数据对象的属性,并通过Object.defineProperty对每个属性进行封装,定义 getter 和 setter。- Getter:每当你访问该属性时,getter 会被调用。在 getter 内部,Vue 会将这个属性的依赖(通常是视图组件)进行收集。
- Setter:每当你修改该属性时,setter 会被调用。在 setter 内部,Vue 会通知所有依赖该属性的视图组件重新渲染。
-
数据变化的通知机制:
Vue 会维护一个 依赖收集 的过程,当某个视图依赖于某个数据属性时,视图会注册为该数据的观察者。这样,当数据变化时,Vue 就会通知这些依赖,触发相应的视图更新。
2. 依赖收集 (Dependency Collection)
Vue 使用一个 Observer 和 Watcher 机制来管理数据变化和视图更新。
-
Observer(观察者):Vue 会对每个数据对象进行劫持,并为每个属性创建一个
Observer对象。这个对象负责数据的 getter 和 setter 操作,同时负责收集依赖。 -
Watcher(观察者):每个组件或者视图实例中的计算属性和渲染函数都可以视为一个
Watcher。当某个数据属性变化时,Watcher会被通知,进而触发视图更新。
当一个组件访问某个响应式数据时,Vue 会将该组件的 Watcher 作为该数据属性的依赖(即让组件 “订阅” 数据属性的变化)。当数据属性改变时,Vue 会通知所有订阅了该属性的 Watcher,从而触发视图更新。
3. 数据变化的过程
假设有以下代码:
data: {message: 'Hello Vue!'
}
- 当 Vue 初始化时,
message属性会被Object.defineProperty封装,变成具有 getter 和 setter 的属性。 - 组件渲染时,会访问
message属性,触发 getter,并将当前的Watcher(即组件)注册为依赖。 - 如果在之后修改
message(例如:this.message = 'Hello World!'),setter 被触发,Vue 会通过Watcher通知相关的组件重新渲染。
4. Vue 3 响应式原理(Proxy)
Vue 3 对响应式的实现做了改进,采用了 Proxy 来代替 Object.defineProperty,使得 Vue 更加高效,特别是在处理嵌套对象和数组时。
基本原理:
Vue 3 使用 Proxy 的 get 和 set 捕获器来代理对象的操作。Proxy 可以直接监听对象的所有操作,包括属性访问、修改、删除等。
const handler = {get(target, key, receiver) {// 访问属性时的逻辑},set(target, key, value, receiver) {// 修改属性时的逻辑}
}const proxy = new Proxy(data, handler);
Vue 3 的响应式系统会创建一个 Proxy 对象,该对象代理原始数据,捕获对数据的读取和写入操作。这样 Vue 可以更加高效地进行依赖收集和数据更新。
5. 响应式实现的优缺点
优点:
- 自动化:无需手动管理视图和数据的同步,Vue 会自动处理数据变化和视图更新。
- 高效:通过 getter 和 setter 进行依赖收集,可以精确地追踪哪些视图依赖于哪些数据,只有相关的视图会在数据变化时更新。
- 灵活性:支持计算属性、侦听器等,使得开发者可以灵活控制数据的变化和视图更新的时机。
缺点:
- 性能开销:在大型应用中,过多的
getter和setter可能会引入性能问题,特别是在复杂的数据结构和深层嵌套的对象中。 - 数组和对象的劫持:Vue 2 使用
Object.defineProperty对数组元素和对象属性进行劫持时,有一些限制(例如,不能监听数组索引变化和数组长度的变化)。Vue 3 使用Proxy改进了这个问题。
总结
Vue 的响应式数据原理是通过 Object.defineProperty(Vue 2)或 Proxy(Vue 3)来实现的。这种机制通过劫持数据的 getter 和 setter,实现了视图和数据的双向绑定。当数据发生变化时,Vue 会通知所有依赖该数据的视图重新渲染,从而实现响应式更新。
相关文章:
vue 响应式数据原理
发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。 Vue 的响应式数据原理是其核心功能之一,它使得 Vue 应用能够自动响应数据的变化,并在数据变化时自动更新…...
android 计算CRC
<?php /** * 将一个字符按比特位进行反转 eg: 65 (01000001) --> 130(10000010) * param $char * return $char */ function reverseChar($char) { $byte ord($char); $tmp 0; for ($i 0; $i < 8; $i) { if ($byte & (1 << $i)…...
Linux tinyproxy 使用教程
简介 Tinyproxy 是一款轻量级 HTTP 代理服务器,使用最少的资源,非常适合硬件有限的系统。尽管体积小,但它可以处理大量流量,而不会出现明显的性能问题。旨在处理简单的代理任务。它通常用于路由网络流量以保护隐私、缓存或访问受…...
局部规划器设计思路
本文参考知乎文章:如何设计局部规划器 0 引言 局部规划器设计通用方法:生成路径——>寻找最优路径——>后处理优化 1 路径生成 四个问题: ① 如果全局路径中突然出现动态障碍物 ② 如果全局路径非常靠近障碍物 ③ 如果全局路径不容易跟踪(B样条平滑) ④ 如果全局…...
数字图像处理技术期末复习
1. 已知图像的分辨率和深度,怎么求图像的存储空间(位,字节,KB)? 题目: 已知图像的分辨率和深度,怎么求图像的存储空间(位,字节,KB)&a…...
UITableView显示数据,增加数据,删除数据及移动数据行
UITableView和html中的table有点类似的,也有header和footer和body,row。下面给出一个demo // // TableViewTestViewController.m // iosstudy2024 // // Created by figo on 2024/12/9. //#import "TableViewTestViewController.h"interfa…...
金智塔科技喜获CCF中国数字金融大会 GraphRAG竞赛二等奖
12月7日,CCF 首届中国数字金融大会GraphRAG竞赛在上海落下帷幕,金智塔科技(团队名称:塔塔向前冲)从众多参赛队伍中脱颖而出,喜获二等奖。 CCF 首届中国数字金融大会由中国计算机学会主办,中国计…...
方案解读:数字化扩展中如何提升多云应用安全能力?
越来越多企业选择上云,拥抱数字化转型。数据显示,在过去一年中,将应用托管至六种不同环境中的企业比例已经翻倍,达到令人震惊的38%。与此同时,应用和流经其的关键数据已成为日益复杂的网络攻击的首选目标,且…...
“年轻科技旗舰”爱玛A7 Plus正式发布,全国售价4999元
12月18日,备受行业瞩目的“A7上场 一路超神”爱玛旗舰新品发布会在爱玛台州智造工厂盛大举行。 作为年末“压轴产品”的“两轮豪华轿跑”爱玛A7Plus重磅上场,以“快、稳、帅、炫、智、爽”六大超神技惊艳四座,不仅践行了爱玛科技的精品战略&…...
oracle开窗函数笔记、over()笔记
文章目录 开窗函数、组函数、分析函数概念聚合函数和分析函数的区别partition by后面也可以跟多个字段 开窗函数一定要加 聚合函数、或分析函数吗,否则会报错lag()和lead()的用法lag和lead实战开窗函数可以和其他函数一起使用吗? TODO开窗函数中的count(1)是什么意…...
【HarmonyOS】HarmonyOS 和 Flutter混合开发 (一)之鸿蒙Flutter环境安装
【HarmonyOS】HarmonyOS 和 Flutter混合开发 (一)之鸿蒙Flutter环境安装 一、前言 flutter作为开源适配框架方案,已经在Android,IOS,Web,Window四大平台进行了适配,一套代码,可以同…...
海外招聘丨卢森堡大学—人工智能和机器学习中的 PI 用于图像分析
雇主简介 卢森堡大学立志成为欧洲最受推崇的大学之一,具有鲜明的国际化、多语言和跨学科特色。 她促进研究和教学的相互影响,与国家息息相关,因其在特定领域的研究和教学而闻名于世,并成为当代欧洲高等教育的创新典范。 她的核…...
LeetCode hot100-85
https://leetcode.cn/problems/coin-change/?envTypestudy-plan-v2&envIdtop-100-liked 322. 零钱兑换 已解答 中等 相关标签 相关企业 给你一个整数数组 coins ,表示不同面额的硬币;以及一个整数 amount ,表示总金额。计算并返回可以凑…...
linux 内核数据包处理中的一些坑和建议
1、获取IP头部 iph ip_hdr(skb); struct sk_buff { ...... sk_buff_data_t transport_header; /* Transport layer header */ sk_buff_data_t network_header; /* Network layer header */ sk_buff_data_t mac_header; /* Link layer header */ ...... } 1࿰…...
C++ 的衰退复制(decay-copy)
目录 1.什么是衰退复制(decay-copy) 1.1.推导规则 1.2.LWG issue 929 1.3.想象中的 decay_copy 2.decay-copy 与 auto 2.1.为什么引入衰退复制 2.2. 成为 C 23 的语言特性 3.应用场景 4.总结 1.什么是衰退复制(decay-copy࿰…...
vue-cli 5接入模块联邦 module federation
vue-cli 5接入模块联邦 module federation 模块联邦概念实现思路配置遇到的问题: 模块联邦概念 模块联邦由webpack 5最先推出的,让应用加载远程的代码模块来实现不同的Web应用共享代码片段.模块联邦分为两个角色,一个是生产者,一个是消费者.生产者暴露代码供消费者消费 (用一个…...
【Rust自学】3.6. 控制流:循环
3.6.0. 写在正文之前 欢迎来到Rust自学的第三章,一共有6个小节,分别是: 变量与可变性数据类型:标量类型数据类型:复合类型函数和注释控制流:if else控制流:循环(本文) 通过第二章…...
【第八节】git与github
目录 前言 一、 远程仓库概述 二、 创建、配置、连接推送远程仓库 2.1 在 GitHub 上创建仓库 2.2 生成 SSH Key 2.3 验证 SSH 连接 2.4 本地初始化仓库 2.5 推送本地仓库到远程 三、 管理远程仓库 3.1 查看远程仓库 3.2 提取远程仓库更新 3.3 推送更新到远程仓库 …...
win如何访问Linux数据库(本地)
对于数据库的学习,我们都是在localhost主机上进行操作,当我们在Linux系统上安装数据库时,我们就有了尝试在win上去访问Linux上的数据库的想法。 数据库中的用户: 我们都知道数据库中顶级的用户为root,在做创建用户的联…...
Windows设置所有软件默认以管理员身份运行
方法一、修改注册表 winr打开运行,输入“regedit”打开注册表; 打开此路径“计算机HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsCurrentVersionPoliciesSystem”; 在右侧找到“EnableLUA”,将其值改为0,重启电脑。 …...
uniapp 对接腾讯云IM群组成员管理(增删改查)
UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
Spring Boot 实现流式响应(兼容 2.7.x)
在实际开发中,我们可能会遇到一些流式数据处理的场景,比如接收来自上游接口的 Server-Sent Events(SSE) 或 流式 JSON 内容,并将其原样中转给前端页面或客户端。这种情况下,传统的 RestTemplate 缓存机制会…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
Map相关知识
数据结构 二叉树 二叉树,顾名思义,每个节点最多有两个“叉”,也就是两个子节点,分别是左子 节点和右子节点。不过,二叉树并不要求每个节点都有两个子节点,有的节点只 有左子节点,有的节点只有…...
Kafka入门-生产者
生产者 生产者发送流程: 延迟时间为0ms时,也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于:异步发送不需要等待结果,同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
