通俗易懂的讲一下Vue的双向绑定和React的单向绑定
1.Vue 的双向绑定:
<template><!-- 输入框和数据自动绑定,就像连体婴儿,一个动另一个也动 --><input v-model="message"><p>{{ message }}</p><!-- 完整表单示例 --><form><!-- 所有输入都自动同步到数据,就像写在纸上字自动复制一样 --><input v-model="user.name" placeholder="姓名"><input v-model="user.age" placeholder="年龄"><textarea v-model="user.bio" placeholder="简介"></textarea></form>
</template><script setup>
// 定义响应式数据
const message = ref('')
const user = reactive({name: '',age: '',bio: ''
})// 当输入框值改变时:
// 1. 自动更新 message 的值
// 2. 相关的视图自动更新
// 就像连锁反应一样,不需要手动处理
</script>
2.React 的单向绑定:
function App() {// 定义状态和更新函数const [message, setMessage] = useState('')const [user, setUser] = useState({name: '',age: '',bio: ''})// 处理输入变化const handleNameChange = (e) => {// 需要手动更新数据setUser({...user,name: e.target.value})}return (<div>{/* 输入框的值来自 message */}{/* 当输入时需要手动调用 setMessage 更新 */}{/* 就像传话游戏,需要一个一个传递 */}<input value={message}onChange={e => setMessage(e.target.value)}/>{/* 完整表单示例 */}<form>{/* 每个输入都需要手动处理更新 */}{/* 就像搬家,每件物品都要自己搬 */}<input value={user.name}onChange={handleNameChange}placeholder="姓名"/></form></div>)
}
3.生活中的例子
Vue 的双向绑定就像:
- 自动门:感应到人就自动开关
- 恒温空调:自动调节温度
- 自动档汽车:自动换挡
- 智能家居:一切自动化
React 的单向绑定就像:
- 普通门:需要手动开关
- 普通空调:需要手动调温度
- 手动档汽车:需要手动换挡
- 传统家电:需要手动控制
4.更多实际例子:
Vue 示例(购物车):
<template><!-- 商品列表 --><div v-for="item in cart" :key="item.id"><!-- 数量输入框自动同步到数据 --><input v-model="item.quantity" type="number"><!-- 价格自动计算 --><p>总价:{{ item.price * item.quantity }}</p></div><!-- 总价自动计算 --><p>购物车总价:{{ totalPrice }}</p>
</template><script setup>
// 购物车数据
const cart = reactive([{ id: 1, name: '苹果', price: 5, quantity: 1 },{ id: 2, name: '香蕉', price: 3, quantity: 1 }
])// 计算总价(自动更新)
const totalPrice = computed(() => {return cart.reduce((total, item) => {return total + item.price * item.quantity}, 0)
})
</script>
React 示例(购物车):
function ShoppingCart() {// 购物车数据const [cart, setCart] = useState([{ id: 1, name: '苹果', price: 5, quantity: 1 },{ id: 2, name: '香蕉', price: 3, quantity: 1 }])// 处理数量变化const handleQuantityChange = (id, quantity) => {// 需要手动更新整个购物车数据setCart(cart.map(item => {if (item.id === id) {return { ...item, quantity }}return item}))}// 计算总价const totalPrice = cart.reduce((total, item) => {return total + item.price * item.quantity}, 0)return (<div>{/* 商品列表 */}{cart.map(item => (<div key={item.id}>{/* 需要手动处理数量变化 */}<input type="number"value={item.quantity}onChange={e => handleQuantityChange(item.id, Number(e.target.value))}/><p>总价:{item.price * item.quantity}</p></div>))}<p>购物车总价:{totalPrice}</p></div>)
}
总结:
Vue 的特点:
- 自动同步数据和视图
- 代码简洁易写
- 不需要手动处理更新
- 适合快速开发
React 的特点:
- 需要手动处理更新
- 代码较多但清晰
- 数据流向明确
- 适合大型项目
就像:
- Vue 是全自动洗衣机(一键完成)
- React 是半自动洗衣机(需要手动设置每个步骤)
选择建议:
- 小项目、快速开发:选 Vue
- 大项目、团队协作:选 React
- 新手入门:Vue 更友好
- 深入理解:React 更有帮助
相关文章:
通俗易懂的讲一下Vue的双向绑定和React的单向绑定
1.Vue 的双向绑定: <template><!-- 输入框和数据自动绑定,就像连体婴儿,一个动另一个也动 --><input v-model"message"><p>{{ message }}</p><!-- 完整表单示例 --><form><!-- 所有…...
Redis 深度解析:从入门到精通
引言 Redis 是一个开源的、高性能的键值存储系统,它支持多种数据结构,并且提供了丰富的功能和接口。作为内存数据库,Redis 以其快速的数据访问速度、灵活的数据模型以及持久化选项而闻名。本文将详细介绍 Redis 的核心概念、工作原理及其应用…...
基于物联网的冻保鲜运输智能控制系统
基于物联网的冻保鲜运输智能控制系统设计文档 1. 项目开发背景 随着全球化贸易的发展,冷链物流在现代运输行业中扮演着日益重要的角色。尤其是冻品、食品、药品等对运输环境有着严格要求的货物,其运输过程中温度、湿度等环境参数必须严格控制ÿ…...
【深度学习基础之多尺度特征提取】多尺度卷积神经网络(MS-CNN)是如何在深度学习网络中提取多尺度特征的?附代码(二)
【深度学习基础之多尺度特征提取】多尺度卷积神经网络(MS-CNN)是如何在深度学习网络中提取多尺度特征的?附代码(二) 【深度学习基础之多尺度特征提取】多尺度卷积神经网络(MS-CNN)是如何在深度…...
论文解读之learning to summarize with human feedback
最近在看大模型训练相关的论文,预计会追溯经典的和最新的训练策略以及微调原理等 本次解读经典论文learning to summarize with human feedback 一、简介 部分生成任务需要对齐人类偏好,但是根据最大化可能性(对数似然)进行微调…...
STM32学习(六 )
串口初始化IO引脚 串口的引脚在哪里 串口可以利用GPIO_InitTypeDef结构体和GPIO_Init()函数进行初始化 USART_InitTypeDef USART_InitStruct;//建立串口结构体USART_InitStruct.USART_BaudRate 115200;//波特率115200USART_InitStruct.USART_Mode US…...
基于 GitHub API 的 Issue 和 PR 自动化解决方案
文章目录 摘要引言优化 Issue 和 PR 管理的方法工具选择流程优化 自动化 Issue 和 PR 管理代码逻辑详解获取 Issue 数据为 Issue 添加标签将 Issue 分配给开发者主逻辑 实际运行效果进一步扩展QA 环节总结参考资料 摘要 在开源项目中,Issue 和 Pull Request&#x…...
56.在 Vue 3 中使用 OpenLayers 通过 moveend 事件获取地图左上和右下的坐标信息
前言 在现代 Web 开发中,地图应用越来越成为重要的组成部分。OpenLayers 是一个功能强大的 JavaScript 地图库,它提供了丰富的地图交互和操作功能,而 Vue 3 是当前流行的前端框架之一。在本篇文章中,我们将介绍如何在 Vue 3 中集…...
文件本地和OSS上传
这里写目录标题 前端传出文件后端本地存储阿里云OSS存储上传Demo实现上传ConfigurationProperties 前端传出文件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>上传文件</title> </head&g…...
elementui table 表格 分页多选,保持选中状态
elementui多选时分页,解决选中状态无法保留选中项问题: 在el-table标签中加入row-key,row-key的值取当前数据里的唯一key在el-table-column selection 项中加入以下:reserve-selection“true” 完成后,将需要清空的地方 ( 如返回…...
MSE+Range案例
MSE的demo实现思路:首先准备fmp4格式的视频地址或者切片,接着将MSE挂载到video上,创建createObjectURL转二进制数据,fetch请求在线地址,分段请求,监听这个数据流的获取状态,当这个ReadyState为o…...
C# 设计模式(结构型模式):代理模式
C# 设计模式(结构型模式):代理模式 在软件开发中,有时我们需要通过某种方式间接地访问一个对象,这时就可以使用代理模式(Proxy Pattern)。代理模式通过引入一个代理对象来控制对目标对象的访问…...
YOLO——pytorch与paddle实现YOLO
YOLO——pytorch与paddle实现YOLO 本文将深入探讨YOLO目标检测的理论基础,并通过PyTorch和PaddlePaddle两个深度学习框架来展示如何实现基础的YOLO模型。我们将首先介绍YOLO的基本概念,这些理论基础是理解和实现YOLO网络的基础。通过PyTorch和PaddlePad…...
持续大额亏损,销量增幅有限,北汽蓝谷依旧黯然神伤
撰稿 | 行星 来源 | 贝多财经 “起了个大早,赶了个晚集”,用在如今的北汽蓝谷身上再合适不过。 2025年的第一个工作日,北汽蓝谷新能源科技股份有限公司(SH:600733,简称“北汽蓝谷”)对外披露了子公司北京…...
C# OpenCV机器视觉:背景减除与前景分离
在实验室的一角,阳光仿若一个急性子的小精灵,迫不及待地穿过窗帘缝隙,在阿强的桌面上欢快跳跃,洒下一片片斑驳陆离的光影,似乎在催促着阿强赶紧开启今日的奇妙探索。阿强端坐在桌前,眼神炽热地盯着眼前那台…...
C语言return与 ? :
上次讲解过一次函数,函数要配合return返回东西,但是在编写一些程序的时候我发现了很多冷门逻辑语法还没有掌握,当时讲课也是看一眼就过去了(死去的记忆开始攻击我) Return,爽! 现在有一个小问…...
【论文阅读】SCGC : Self-supervised contrastive graph clustering
论文地址:SCGC : Self-supervised contrastive graph clustering - ScienceDirect 代码地址: https://github.com/gayanku/SCGC 摘要 图聚类旨在发现网络中的群体或社区。越来越多的模型使用自编码器(autoencoders)结合图神经网…...
python pyqt5+designer的信号槽和动态显示
至少需要两个文件,一个是python的主文件,一个是designer的UI文件 1.对UI文件的处理 首先需要将UI文件转化成python文件,并且引入到主文件中。 2.在主文件中接受UI上的一些动作和返回主文件处理的数据到UI界面上。 框中选中的部分,…...
版本控制系统Helix Core 2024.2增强功能:与OpenTelemetry协议集成、Delta同步和传输等
“Perforce团队非常高兴为您带来Helix Core 2024.2版本,它拥有众多旨在提高团队效率、优化工作流程的增强功能。通过新的Open Telemetry协议集成,团队现在可以轻松将结构化日志集成到可观测性平台中。DeltaTransfer现在也适用于同步操作——这是2024.1版…...
certificate verify failed: unable to get local issuer certificate (_ssl.c:10
出现 “certificate verify failed: unable to get local issuer certificate (_ssl.c:10)” 这个错误通常是因为Python在尝试建立HTTPS连接时,无法验证服务器的SSL证书。这可能是因为本地系统中缺少必要的根证书,或者服务器的证书链不完整,导…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述:海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而,目前该领域仍面临一个挑战,即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
接口自动化测试:HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具,支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议,涵盖接口测试、性能测试、数字体验监测等测试类型…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
