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,重启电脑。 …...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...
wpf在image控件上快速显示内存图像
wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像(比如分辨率3000*3000的图像)的办法,尤其是想把内存中的裸数据(只有图像的数据,不包…...
