Vue 3.0双向数据绑定实现原理
Vue3 的数据双向绑定是通过响应式系统来实现的。相比于 Vue2,Vue3 在响应式系统上做了很多改进,主要使用了 Proxy 对象来替代原来的 Object.defineProperty。本文将介绍 Vue3 数据双向绑定的主要特点和实现方式。
1. 响应式系统
1.1. Proxy对象
Vue3 使用 JavaScript 的 Proxy 对象来实现响应式数据。Proxy 可以监听对象的所有操作,包括读取、写入、删除属性等,从而实现更加灵活和高效的响应式数据。
1.2. reactive函数
Vue3 提供了一个 reactive 函数来创建响应式对象,通过 reactive 函数包装的对象会变成响应式数据,Vue 会自动跟踪这些数据的变化。
import { reactive } from 'vue';const state = reactive({message: 'Hello Vue3'
});
1.3. ref函数
对于基本数据类型,如字符串、数字等,Vue3 提供了 ref 函数来创建响应式数据,使用 ref 包装的值可以在模板中进行双向绑定。
import { ref } from 'vue';const count = ref(0);
2. 双向绑定
Vue3 中的双向绑定主要通过 v-model 指令来实现,适用于表单元素,如输入框、复选框等。以下是一个简单的示例:
<template><input v-model="message" /><p>{{ message }}</p>
</template><script>
import { ref } from 'vue';export default {setup() {const message = ref('');return {message}}
}
</script>
在 Vue3 中,v-model 的使用更加灵活,可以支持自定义组件的双向绑定:
<template><CustomInput v-model:value="message" />
</template><script>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';export default {components: {CustomInput},setup() {const message = ref('');return {message}}
}
</script>
在 CustomInput 组件中:
<template><input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/>
</template><script>
export default {props: {modelValue: String}
};
</script>
下面,我们来深入了解 Vue3 如何通过源码实现数据的双向绑定。
3. 源码实现
3.1. Proxy实现响应式
Vue3 使用 Proxy 对象来实现响应式数据。Proxy 允许我们定义基本操作的自定义行为,如读、写、删除、枚举等。
以下是 Vue3 响应式系统的核心代码片段:
function reactive(target) {return createReactiveObject(target, mutableHandlers);
}const mutableHandlers = {get(target, key, receiver) {// 依赖收集track(target, key);const res = Reflect.get(target, key, receiver);// 深度响应式处理if (isObject(res)) {return reactive(res);}return res;},set(target, key, value, receiver) {const oldValue = target[key];const result = Reflect.set(target, key, value, receiver);// 触发更新if (oldValue != value) {trigger(target, key);}return result;},// 其他处理函数 (deleteProperty, has, ownKeys 等)
};function createReactiveObject(target, handlers) {if (!isObject(target)) {return target;}const proxy = new Proxy(target, handlers);return proxy;
}
3.2. 依赖心集与触发更新
在响应式系统中,依赖收集和触发更新是两个核心概念。Vue3 使用 track和 trigger 函数来实现这两个功能。
const targetMap = new WeakMap();function track(target, key) {const effect = activeEffect;if (effect) {let depsMap = targetMap.get(target);if (!depsMap) {targetMap.set(target, (depsMap = new Map()));}let dep = depsMap.get(key);if (!dep) {depsMap.set(key, (dep = new Set()));}if (!dep.has(effect)) {dep.add(effect);effect.deps.push(dep);}}
}function trigger(target, key) {const depsMap = targetMap.get(target);if (!depsMap) return;const effects = new Set();const add = effectsToAdd => {if (effectsToAdd) {effectsToAdd.forEach(effect => effects.add(effect));}};add(depsMap.get(key));effects.forEach(effect => effect());
}
3.3. ref实现
对于基本数据类型,Vue3 提供了 ref 函数来创建响应式数据。ref 使用一个对象来包装值,并通过 getter和 setter 来实现响应式。
function ref(value) {return createRef(value);
}function createRef(rawValue) {if (isRef(rawValue)) {return rawValue;}const r = {__v_isRef: true,get value() {track(r, 'value');return rawValue;},set value(newVal) {if (rawValue !== newVal) {rawValue = newVal;trigger(r, 'value');}}};return r;
}function isRef(r) {return r ? r.__v_isRef === true : false;
}
3.4. v-model实现
Vue3 中的 v-model 实现依赖于响应式系统。
3.4.1. 编译时实现
// packages/compiler-core/src/transforms/vModel.ts
export const transformModel: NodeTransform = (node, context) => {if (node.type === NodeTypes.ELEMENT) {// 对每个元素节点执行此方法return () => {// 只处理有 v-model 指令的节点const node = context.currentNodelif (node.tagType === ElementTypes.ELEMENT) {const dir = findDir(node, 'model')if (dir && dir.exp) {// 根据节点类型调用不同的处理函数const { tag } = nodeif (tag === 'input') {processInput(node, dir, context)} else if (tag === 'textarea') {processTextArea(node, dir, context)} else if (tag === 'select') {processSelect(node, dir, context)} else if (!context.inSSR) {// 组件上的 v-modelprocessComponent(node, dir, context)}}}}}
}// 处理组件上的v-model
function processComponent(node: ElementNode,dir: DirectiveNode,context: TransformContext
) {// 获取 v-model 的参数,支持 v-model:arg 形式const { arg, exp } = dir// 默认参数是 'modelValue'const prop = arg ? arg : createSimpleExpression('modelValue', true)// 默认事件是 'update:modelValue'const event = arg? createSimpleExpression(`update:${arg.content}`, true): createSimpleExpression('update:modelValue', true)// 添加 prop 和 event 到 props 中const props = [createObjectProperty(prop, dir.exp!),createObjectProperty(event, createCompoundExpression([`$event => ((`, exp, `) = $event)`]))]// 将 v-model 转换为组件的 props 和事件node.props.push(createObjectProperty(createSimpleExpression(`onUpdate:modelValue`, true),createCompoundExpression([`$event => (${dir.exp!.content} = $event)`])))
}
3.4.2. 运行时实现
// packages/runtime-core/src/helpers/vModel.ts
export function vModelText(el: any, binding: any, vnode: VNode) {// 处理文本输入框的 v-modelconst { value, modifiers } = bindingel.value = value == null ? '' : value// 添加事件监听el._assign = getModelAssigner(vnode)const lazy = modifiers ? modifiers.lazy : falseconst event = lazy ? 'change' : 'input'el.addEventListener(event, e => {// 触发更新el._assign(el.value)})
}export function vModelCheckbox(el: any, binding: any, vnode: VNode) {// 处理复选框的 v-modelconst { value, oldValue } = bindingel._assign = getModelAssigner(vnode)// 处理数组类型的值(多选)if (isArray(value)) {const isChecked = el._modelValue? looseIndexOf(value, el._modelValue) > -1: falseif (el.checked !== isChecked) {el.checked = isChecked}} else {// 处理布尔值if (value !== oldValue) {el.checked = looseEqual(value, el._trueValue)}}
}// 辅肋函数
function getModelAssigner(vnode: VNode): (value: any) => void {// 获取模型赋值函数const fn = vnode.props!['onUpdate:modelValue']return isArray(fn) ? (value: any) => invokeArrayFns(fn, value) : fn
}
相关文章:
Vue 3.0双向数据绑定实现原理
Vue3 的数据双向绑定是通过响应式系统来实现的。相比于 Vue2,Vue3 在响应式系统上做了很多改进,主要使用了 Proxy 对象来替代原来的 Object.defineProperty。本文将介绍 Vue3 数据双向绑定的主要特点和实现方式。 1. 响应式系统 1.1. Proxy对象 Vue3 …...
Quasar组件 Carousel走马灯
通过对比两个q-carousel组件来,了解该组件的属性 官方文档请参阅:Carousel 预览 源代码 <template><div class"q-pa-md"><div class"q-gutter-md"><q-carouselv-model"slide"transition-prev&quo…...
Vue 2.0学习
个人简介 👨💻个人主页: 魔术师 📖学习方向: 主攻前端方向,正逐渐往全栈发展 🚴个人状态: 研发工程师,现效力于政务服务网事业 🇨🇳人生格言&…...
LangFlow技术深度解析:可视化编排LangChain应用的新范式 -(3)组件系统
Component System | langflow-ai/langflow | DeepWiki 组件系统 相关源文件 组件系统是核心基础设施,使 Langflow 能够在工作流中创建、配置和连接模块化构建块。该系统通过为组件提供一致的接口来定义其输入、输出、执行行为以及与其他组件的连接,从…...
【Win32 API】 lstrcmpA()
作用 比较两个字符字符串(比较区分大小写)。 lstrcmp 函数通过从第一个字符开始检查,若相等,则检查下一个,直到找到不相等或到达字符串的末尾。 函数 int lstrcmpA(LPCSTR lpString1, LPCSTR lpString2); 参数 lpStr…...
LabVIEW光谱检测系统
腔衰荡光谱技术(CRDS)凭借高精度和高灵敏度特性,成为微量气体浓度检测的常用方法,而准确获取衰荡时间是该技术应用的关键。基于LabVIEW平台设计腔衰荡信号在线处理系统,实现对衰荡信号的实时采集、平均、拟合、显示和保…...
深入解读WPDRRC信息安全模型:构建中国特色的信息安全防护体系
目录 前言1 WPDRRC模型概述2 模型结构详解2.1 预警(Warning)2.2 保护(Protect)2.3 检测(Detect)2.4 响应(React)2.5 恢复(Restore)2.6 反击(Count…...
uniapp-商城-59-后台 新增商品(属性的选中,进行过滤展示,filter,some,every和map)
前面讲了属性的添加,添加完成后,数据库中已经存在数据了,这时再继续商品的添加时,就可以进行属性的选择了。 在商品添加过程中,属性选择是一个关键步骤。首先,界面需要展示嵌套的属性数据,用户通…...
RDIFramework.NET Web敏捷开发框架 V6.2发布(.NET6+、Framework双引擎)
1、框架介绍 .NET6、Framework双引擎、全网唯一 RDIFramework.NET敏捷开发框架,是我司重磅推出的支持.NET6和.NET Framework双引擎的快速信息化系统开发、整合框架,为企业快速构建企业级的应用提供了强大支持。 依托框架强大的基座,开发人员只…...
JMeter 教程:编写 GET 请求脚本访问百度首页
目录 练习要求: 练习步骤: 效果图: 练习要求: 练习步骤: 效果图:...
JSP 实现二级联动下拉菜单:一次加载,前端动态更新
在Web开发中,二级联动下拉菜单(或多级联动)是一种非常常见的用户交互形式,例如选择省份后动态加载对应的城市列表。本文将详细介绍一种在JSP中实现二级联动的方法:后端一次性将所有联动数据加载到前端,然后通过JavaScript在客户端动态更新二级下拉菜单。这种方法对于数据…...
Room数据库
Room数据库 Room是Android Jetpack组件中的一款SQLite数据库抽象层框架,旨在简化本地数据库操作,提供编译时SQL校验、类型与安全、与LiveData/Flow无缝集成等特性。 1. 什么是Room 定义: Room 是 Android Jetpack 提供的一个 ORMÿ…...
文件上传Ⅲ
#文件-解析方案-执行权限&解码还原 1、执行权限 文件上传后存储目录不给执行权限(即它并不限制你上传文件的类型,但不会让相应存有后门代码的PHP文件执行,但是PNG图片是可以访问的) 2、解码还原 数据做存储,解…...
前端取经路——量子UI:响应式交互新范式
嘿,老铁们好啊!我是老十三,一枚普通的前端切图仔(不,开玩笑的,我是正经开发)。最近前端技术简直跟坐火箭一样,飞速发展!今天我就跟大家唠唠从状态管理到实时渲染…...
15 C 语言字符类型详解:转义字符、格式化输出、字符类型本质、ASCII 码编程实战、最值宏汇总
1 字符类型概述 在 C 语言中,字符类型 char 用于表示单个字符,例如一个数字、一个字母或一个符号。 char 类型的字面量是用单引号括起来的单个字符,例如 A、5 或 #。 当需要表示多个字符组成的序列时,就涉及到了字符串。在 C 语言…...
AlphaEvolve:LLM驱动的算法进化革命与科学发现新范式
AlphaEvolve:LLM驱动的算法进化革命与科学发现新范式 本文聚焦Google DeepMind最新发布的AlphaEvolve,探讨其如何通过LLM与进化算法的结合,在数学难题突破、计算基础设施优化等领域实现革命性进展。从48次乘法优化44矩阵相乘到数据中心资源利…...
比较文本搜索策略 pgsearch、tsvector 和外部引擎
大家好,这里是架构资源栈!点击上方关注,添加“星标”,一起学习大厂前沿架构! 在应用程序中实现搜索功能时,您需要选择合适的文本搜索方法。本指南比较了 PostgreSQL 的内置搜索引擎tsvector、pg_search扩展…...
58. 区间和
题目链接: 58. 区间和 题目描述: 给定一个整数数组 Array,请计算该数组在每个指定区间内元素的总和。 输入描述 第一行输入为整数数组 Array 的长度 n,接下来 n 行,每行一个整数,表示数组的元素。随后…...
MySQL中表的增删改查(CRUD)
一.在表中增加数据(Create) INSERT [INTO] TB_NAME [(COLUMN1,COLUMN2,...)] VALUES (value_list1),(value_list2),...;into可以省略可仅选择部分列选择插入,column即选择的列, 如图例可以选择仅在valuelist中插入age和id如果不指…...
SQL练习(6/81)
目录 1.寻找连续值 方法一:使用自连接(Self-Join) 方法二:使用窗口函数(Window Functions) 2.寻找有重复的值 GROUP BY子句 HAVING子句 常用聚合函数: 3.找不存在某属性的值 not in no…...
Android 中 打开文件选择器(ACTION_OPEN_DOCUMENT )
在 Android 中,打开文件选择器(File Picker)通常是指启动一个系统提供的界面,让用户可以选择存储在设备上的文件。可以通过发送一个带有 Intent.ACTION_OPEN_DOCUMENT 或 Intent.ACTION_GET_CONTENT 的 Intent 来实现。 1、启动文…...
AWS中国区CloudFront证书管理和应用指南
在AWS中国区使用CloudFront时,SSL/TLS证书的管理和应用是一个重要的环节。本文将详细介绍如何在AWS中国区上传、管理和应用SSL证书到CloudFront分配。 1. 准备证书文件 首先,我们需要准备好SSL证书相关的文件。通常,这包括: 私钥文件(.key)公钥证书文件(.crt)证书链文…...
Python之三大基本库——Matplotlib
好久没来总结了,今天刚好有时间,我们来继续总结一下python中的matplotlib 一、什么是Matplotlib Matplotlib是一个Python的2D绘图库,主要用于将数据绘制成各种图表,如折线图、柱状图、散点图、直方图、饼图等。它以各种硬拷贝…...
随笔:hhhhh
第一题 ∫ − ∞ ∞ x e x − e x d x ∫ 0 ∞ ln t ⋅ e ln t − t ⋅ 1 t d t ∫ 0 ∞ ln t ⋅ e − t ⋅ 1 t ⋅ t d t ∫ 0 ∞ ln t ⋅ e − t d t ψ ( 1 ) − γ \begin{align*} \int_{-\infty}^{\infty}xe^{x-e^x}\text{d}x&\int_{0}^{\infty}…...
计算机网络-----6分层结构
目录 “分层” 的设计思想: 计算机网络要完成的功能: 计算机网络的分层结构: 网络体系结构的概念: 各层之间的关系: 数据的传输过程 水平视角: 垂直视角: 相关概念 协议三要素&#x…...
初识SOC:RK3588
目录 一、高性能计算与边缘计算 二、多媒体处理与显示 三、图形与游戏开发 四、物联网与嵌入式系统 五、操作系统兼容性 RK3588作为瑞芯微推出的高性能处理器,凭借其多核架构、高算力NPU和多媒体处理能力,可广泛应用于以下领域: 一、高…...
卡顿检测与 Choreographer 原理
一、卡顿检测的原理 卡顿的本质是主线程(UI 线程)未能及时完成某帧的渲染任务(超过 16.6ms,以 60Hz 屏幕为例),导致丢帧(Frame Drop)。检测卡顿的核心思路是监控主线程任务的执行时…...
第十天——贪心算法——深度总结
文章目录 贪心算法深度解析:原理与应用 1. 贪心算法的基本原理 1.1 贪心选择性质 1.2 最优子结构 1.3 贪心算法与动态规划的对比 2. 贪心算法的应用场景 3. 具体应用案例 3.1 分配饼干 (Assign Cookies) 3.2 分糖果 (Candy Distribution) 3.3 种花问题 (C…...
python自学笔记2 数据类型
字符串操作 f字符串: for index, char in enumerate(greeting_str):print(f"字符:{char}, 索引:{index}")f字符串可以方便的在字符串中插入变量 字符串切片 指定步长: print(greeting_str[::2])指定步长为2的取字符…...
nacos配置文件快速部署另一种方法
提交nacos配置的另一种一种方法,批命令/shell: 以下脚本直接把当前目录下的所有yaml文件一键提交到nacos上 前提是要先安装curl 以及 jq 然后 把下面的shell保存为 import-all.sh 然后 chmod x import-all.sh && ./import-all.sh 就好了. 记得修改一下的NAMESPACE_…...
RTK哪个品牌好?2025年RTK主流品牌深度解析
在测绘领域,RTK 技术的发展日新月异,选择一款性能卓越、稳定可靠的 RTK 设备至关重要。2025 年,市场上涌现出众多优秀品牌,本文将深入解析几大主流品牌的核心竞争力。 华测导航(CHCNAV):技术创…...
游戏引擎学习第285天:“Traversables 的事务性占用”
回顾并为当天的工作做准备 我们有一个关于玩家移动的概念,玩家可以在点之间移动,而且当这些点移动时,玩家会随之移动。现在这个部分基本上已经在工作了。我们本来想实现的一个功能是:当玩家移动到某个点时,这个点能“…...
HNUST湖南科技大学-安卓Android期中复习
使用说明:除了选择判断就看习题外,推荐重点复习三四章多复习案例,这里应该是编程空题,把界面控件、活动单元熟悉一下。第五章(数据存储方式,尤其是文件存储)、第六章(重点内容提供者…...
一种应用非常广泛的开源RTOS(实时操作系统):nuttx
什么是NuttX? NuttX(读音接近“纳特-艾克斯”)是一种应用非常广泛的开源RTOS(实时操作系统),由Gregory Nutt博士主要推动开发。RTOS,即 Real-Time Operating System,直译为“实时操…...
WebSocket 客户端 DLL 模块设计说明(基于 WebSocket++ + Boost.Asio)
WebSocket 客户端 DLL 模块设计说明(基于 WebSocket Boost.Asio) 📌 目录 一、模块总览二、导出接口说明(EXPORTS)三、状态变量功能解读四、连接启动流程详解五、事件回调说明六、消息发送流程七、心跳与断连 JSON …...
微信小程序:封装request请求、解决请求路径问题
一、创建文件 1、创建请求文件 创建工具类文件request.js,目的是用于发送请求 二、js接口封装 1、写入接口路径 创建一个变量BASE_URL专门存储api请求地址 2、获取全局的token变量 从缓存中取出token的数据 3、执行请求 (1)方法中接收传递的参数 function request(url,…...
Ubuntu24.04 安装 5080显卡驱动以及cuda
前言 之前使用Ubuntu22.04版本一直报错,然后换了24.04版本才能正常安装 一. 配置基础环境 Linux系统进行环境开发环境配置-CSDN博客 二. 安装显卡驱动 1.安装驱动 按以下步骤来: sudo apt update && sudo apt upgrade -y#下载最新内核并安装 sudo add…...
Jenkins的流水线执行shell脚本执行jar命令后项目未启动未输出日志问题处理
现象 在流水线里配置了启动脚本例如,nohup java -jar xxx.jar >nohup.out 2>&1 & 但是在服务器发现服务并未启动,且nohup日志里没输出日志,这样的原因是jenkins在执行完脚本后,就退出了这个进程。 解决 在启动脚本执行jar命令的上一步…...
Core Web Vitals 全链路优化:从浏览器引擎到网络协议深度调优
Core Web Vitals 全链路优化:从浏览器引擎到网络协议深度调优 一、浏览器渲染引擎级优化 1.1 合成器线程优化策略 • 分层加速:通过will-change属性创建独立的合成层 .accelerated {will-change: transform;backface-visibility: hidden; }• 光栅化策略调整:使用image-r…...
【网络编程】十、详解 UDP 协议
文章目录 Ⅰ. 传输层概述1、进程之间的通信2、再谈端口号端口号的引出五元组标识一个通信端口号范围划分常见的知名端口号查看知名端口号协议号 VS 端口号 3、两个问题一个端口号是否可以被多个进程绑定?一个进程是否可以绑定多个端口号? 4、部分常见指令…...
求职困境:开发、AI、运维、自动化
文章目录 问:我的技术栈是web全栈(js,css,html,react,typscript),C开发,python开发,音视频图像开发,神经网络深度学习开发,运维&#…...
如何将数据从一部手机传输到另一部手机 | 5 种便捷传输方式
更换新手机可能是一种令人兴奋的体验,但您仍然需要解决问题 - 如何将数据从一部手机传输到另一部手机。幸运的是,有多种方法可以简化此过程,从一键式解决方案到基于云的传输。本文探讨了五种流行的技术来帮助您无缝迁移数据。 第 1 部分&…...
GEE计算 RSEI(遥感生态指数)
🛰️ 什么是 RSEI?为什么要用它评估生态环境? RSEI(遥感生态指数,Remote Sensing Ecological Index) 是一种通过遥感数据计算得到的、综合反映区域生态环境质量的指标体系。 它的设计初衷是用最少的变量&…...
k8s监控方案实践补充(二):使用kube-state-metrics获取资源状态指标
k8s监控方案实践补充(二):使用kube-state-metrics获取资源状态指标 文章目录 k8s监控方案实践补充(二):使用kube-state-metrics获取资源状态指标一、Metrics Server简介二、kube-state-metrics实战部署1. 创…...
JavaScript:PC端特效--元素可视区client系列
一、client系列 client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 client系列属性作用element.clientTop返回元素上边框的大小element.clientLeft返回元…...
Centos7 中 Docker运行配置Apache
1、拉去httpd镜像(不加版本号,默认拉最新版本) docker pull httpd 2、运行httpd docker run -di --name httpd-test -p 8080:80 httpd 3、创建文件夹后边做映射 mkdir -p /Docker/apache/www /Docker/apache/logs /Docker/apache/conf 4、…...
PostgreSQL中的全页写
一、概述 在PGSQL数据库中,默认的页面大小为8KB,但是磁盘buffer的大小为4KB,扇区大小为512B。这就导致在操作系统的角度看数据库的写操作,其实并不是一种原子操作。如果操作系统发生了系统级别的故障,此时正好操作系统…...
对称二叉树的判定:双端队列的精妙应用
一、题目解析 题目描述 给定一个二叉树,检查它是否是镜像对称的。例如,二叉树 [1,2,2,3,4,4,3] 是对称的: 1/ \2 2/ \ / \ 3 4 4 3而 [1,2,2,null,3,null,3] 则不是镜像对称的: 1/ \2 2\ \3 3问题本质 判断一棵二叉…...
Redis + ABP vNext 构建分布式高可用缓存架构
🚀 Redis ABP vNext 构建分布式高可用缓存架构 🔧 环境准备 开发环境 .NET 8.0 SDKVisual Studio 2022 / VS CodeDocker & Docker Compose NuGet 包 Volo.Abp.Caching.StackExchangeRedis v8.1.5Volo.Abp.DistributedLocking.StackExchangeRedis v…...
jvm第一篇《内存与垃圾回收》学习笔记第一章jvm初始
jvm是虚拟机的通称。 java实际默认的应用是hotspot(基于栈的指令集架构) 注:注意区分寄存器的指令集和栈指令集的架构。(大概理解java移植性好就是因为是栈指令集) jvm虚拟机,具有跨语言功能࿰…...