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

React 与 Vue 对比指南 - 上

在这里插入图片描述

React 与 Vue 对比指南 - 上

本文将展示如何在 ReactVue 中实现常见功能,从基础渲染到高级状态管理

Hello

分别使用 reactvue 写一个 Hello World!

react

export default () => {return <div>Hello World!</div>;
}

vue

<template><div>Hello World!</div>
</template>

属性绑定

react

通过 {} 绑定属性

export default () => {const url = "https://liuyuyang.net"return <a href={url}>跳转</a>;
}

vue

通过 : 绑定属性

<script setup lang="ts">
const url = "https://liuyuyang.net"
</script><template><!-- <a href="https://liuyuyang.net"></a> --><a :href="url">跳转</a>
</template>

表达式

react

react 的表达式是单括号

export default () => {const value = "Hello World!"const getValue = () => "Hello"const getImage = () => "https://liuyuyang.net"return (<><div>{value}</div><div>{true ? 'yes' : 'no'}</div><div>{getValue()}</div><img src={getImage() + '/1.jpg'} /><div style={{ background: true ? 'red' : 'blue' }}>{value}</div></>)
}

vue

vue 的表达式是双括号

<script setup lang="ts">
const value = "Hello World!"
const getValue = () => "Hello"
const getImage = () => "https://liuyuyang.net"
</script><template><div>{{ value }}</div><div>{{ true ? 'yes' : 'no' }}</div><div>{{ getValue() }}</div><img :src="getImage() + '/1.jpg'" /><div :style="{ background: true ? 'red' : 'blue' }">{{ value }}</div>
</template>

动态类名

react

react 定义类名的方式为 className

export default () => {return <div className={`${true ? 'aaa' : 'bbb'}`}>Hello World!</div>
}

vue

vue 定义类名的方式为 class

<script setup lang="ts">
</script><template><div :class="`${true ? 'aaa' : 'bbb'}`">Hello World!</div><div :class="{ aaa: true }">Hello World!</div><div :class="{ 'aaa-bbb': true }">Hello World!</div>
</template>

条件渲染

react

react 大多数语法都比较偏向原生

export default () => {const active = 1return (<>{active === 1? <div>aaa</div>: active === 2? <div>bbb</div>: <div>ccc</div>}</>)
}

vue

vue 可以使用 v-ifv-show 进行条件渲染

<script setup lang="ts">
const active = 1
</script><template><div v-if="active === 1">aaa</div><div v-else-if="active === 2">bbb</div><div v-else="true">ccc</div>
</template>

渲染数据

react

react 虽然有点语法写起来没有 vue 简单,但他的有点在于更加灵活、自由,非常受益于大型复杂的项目

export default () => {const list = ['aaa', 'bbb', 'bbb']return (<ul>{list.map((item, index) => {return <li key={index}>{item}</li>})}</ul>)
}

vue

vue 使用 v-for 进行数据渲染

<script setup lang="ts">
const list = ['aaa', 'bbb', 'bbb']
</script><template><ul><li v-for="(item, index) in list" :key="index">{{ item }}</li></ul>
</template>

事件处理

react

reactonClick 需要的是一个函数

export default () => {const func = () => alert("Hello World!")// return <button onClick={() => alert("Hello World!")}>点击弹框</button>;return <button onClick={func}>点击弹框</button>;
}

react 事件传参方式

export default () => {const func = (msg: string) => {alert(msg)}return <button onClick={() => func('Hello World!')}>点击弹框</button>;
}

vue

vue@click 需要的是实例上已有的函数,比如在当前文件以及全局定义或内置的函数。因为 alert 不在实例上,因此不能直接 @click="alert('Hello World!')",但我们可以在当前文件定义一个函数,在函数里面使用 alert,然后调用这个函数

<script setup lang="ts">
const func = () => {alert('Hello World!')
}
</script><template><!-- <button v-on:click="func">点击弹框</button> --><button @click="func">点击弹框</button>
</template>

vue 事件传参方式

<script setup lang="ts">
const func = (msg: string) => {alert(msg)
}
</script><template><button @click="func('Hello World!')">点击弹框</button>
</template>

状态处理

react

react 通过 useState 进行状态管理

import { useState } from "react";export default () => {const [count, setCount] = useState(0)return (<><button onClick={() => setCount(count + 1)}>+1</button><div>{count}</div></>);
}

vue

vue 通过 refreactive 进行状态管理

<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0)// count.value = 100 在脚本中需要加.value,在模板中则不需要
</script><template><button @click="count++">+1</button><button @click="() => count++">+1</button><div>{{ count }}</div>
</template>

表单处理

react

表单处理这一点个人感觉 react 要比 vue 麻烦些

import { useState } from "react";export default () => {const [value, setValue] = useState("")return (<><input type="text" value={value} onChange={e => setValue(e.target.value)} /><div>{value}</div></>);
}

vue

双向数据绑定,vue 的一大特性,这个语法糖非常好用

<script setup lang="ts">
import { ref } from 'vue'
const value = ref("")
</script><template><input type="text" v-model="value"><div>{{ value }}</div>
</template>

数据侦听

react

react 通过 useEffect 监听数据的变化

import { useEffect, useState } from "react"export default () => {const [count, setCount] = useState(0)useEffect(() => {console.log(count)}, [count])return <button onClick={() => setCount(count + 1)}>+1</button>
}

vue

vue 通过 watch 监听数据的变化

<script setup lang="ts">
import { ref, watch } from 'vue';
const count = ref(0)// watch(() => count.value, (newValue, oldValue) => { 
watch(count, (value) => { console.log(value);
})
</script><template><button @click="count++">+1</button>
</template>

计算属性

react

react 通过 useMemo 实现计算属性

import { useMemo, useState } from "react"export default () => {const [count, setCount] = useState(0)const newCount = useMemo(() => count * 2, [count])return (<><h1>{count} {newCount}</h1><button onClick={() => setCount(count + 1)}>+1</button></>)
}

vue

vue 通过 computed 实现计算属性

<script setup lang="ts">
import { ref, computed } from 'vue';
const count = ref(0)
const newCount = computed(() => count.value * 2)
</script><template><h1>{{ count }} {{ newCount }}</h1><button @click="count++">+1</button>
</template>

下期内容

下一期内容为:组件、路由、全局状态管理、以及两种框架完成相同的 Demo

相关文章:

React 与 Vue 对比指南 - 上

React 与 Vue 对比指南 - 上 本文将展示如何在 React 和 Vue 中实现常见功能&#xff0c;从基础渲染到高级状态管理 Hello 分别使用 react 和 vue 写一个 Hello World&#xff01; react export default () > {return <div>Hello World!</div>; }vue <…...

开源协议深度解析:理解MIT、GPL、Apache等常见许可证

目录 前言1. MIT协议&#xff1a;自由而宽松的开源许可1.1 MIT协议的主要特点1.2 MIT协议的适用场景 2. GPL协议&#xff1a;自由软件的捍卫者2.1 GPL协议的核心理念2.2 GPL协议的适用场景 3. Apache License 2.0&#xff1a;开源与专利保护的平衡3.1 Apache License 2.0的主要…...

通用评估系统(五)- 前端部分总体说明

通用评估系统&#xff08;五&#xff09;- 前端部分总体说明 相关链接 Gitee地址通用评估系统&#xff08;一&#xff09;- 介绍通用评估系统&#xff08;二&#xff09;- 原型设计通用评估系统&#xff08;三&#xff09;- 前端部分通用评估系统&#xff08;四&#xff09;-…...

STM32GPIO

目录 GPIO基本结构GPIO位结构输入部分输出部分 输出模式GPIO模式浮空/上拉/下拉模拟输入开漏和推挽复用开漏/复用推挽 GPIO基本结构 GPIO是挂载在APB2总线上的外设。GPIO结构中的寄存器分为输入寄存器和输出寄存器&#xff0c;APB2总线通过输出寄存器向引脚发送数据&#xff0c…...

MyBatis拦截器终极指南:从原理到企业级实战

在本篇文章中&#xff0c;我们将深入了解如何编写一个 MyBatis 拦截器&#xff0c;并通过一个示例来展示如何在执行数据库操作&#xff08;如插入或更新&#xff09;时&#xff0c;自动填充某些字段&#xff08;例如 createdBy 和 updatedBy&#xff09;信息。本文将详细讲解拦…...

SpringBoot启动失败之application.yml缩进没写好

修改前&#xff1a; spring前面空格了 报错输出&#xff1a;Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured. Reason: Failed to determine a suitable driver class Action: Consider the follow…...

【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter17-事件

十七、事件 事件 JavaScript 与 HTML 的交互是通过事件实现的&#xff0c;事件代表文档或浏览器窗口中某个有意义的时刻。可以使用仅在事件发生时执行的监听器&#xff08;也叫处理程序&#xff09;订阅事件。在传统软件工程领域&#xff0c;这个模型叫“观察者模式”&#xff…...

鸿蒙开发:V2版本装饰器之@Monitor装饰器

前言 本文代码案例基于Api13。 随着官方的迭代&#xff0c;在新的Api中&#xff0c;对于新的应用开发&#xff0c;官方已经建议直接使用V2所属的装饰器进行开发了&#xff0c;所以&#xff0c;能上手V2的尽量上手V2吧&#xff0c;毕竟&#xff0c;V2是V1的增强版本&#xff0c;…...

51单片机-外部中断

以外部中断0为例&#xff1a; 主程序中需要有以下代码&#xff1a; EA1; //打开总中断开关 EX01; //开外部中断0 IT00/1&#xff1b; 设置外部中断的触发方式 P3.2\P3.3为外部中断接口&#xff0c;通过控制P3.2口按键按下实现LED灯反转点亮 #include "reg52.h"typed…...

UE C++ UObject 功能的初步总结(结合官方文档)

一. Uboject的官方文档的个人理解 Objects in Unreal Engine | 虚幻引擎 5.5 文档 | Epic Developer Community 目录在此 1.垃圾回收:上篇文章简单介绍过&#xff0c;UObject的创建和回收。本身是很复杂的功能&#xff0c;后续会接着单项深入分析。 2.引用更新 1. 反射:之前…...

DeepSeek和ChatGPT的全面对比

一、模型基础架构对比&#xff08;2023技术版本&#xff09; 维度DeepSeekChatGPT模型家族LLAMA架构改进GPT-4优化版本参数量级开放7B/35B/120B闭源175B位置编码RoPE NTK扩展ALiBiAttention机制FlashAttention-3FlashAttention-2激活函数SwiGLU ProGeGLU训练框架DeepSpeedMeg…...

Spring Boot Actuator 监控✨

Spring Boot Actuator 是 Spring Boot 提供的一个强大的监控和管理工具&#xff0c;它可以帮助你深入了解和监控你的应用程序的运行状态。通过 Actuator&#xff0c;你可以获取应用程序的健康状况、内存使用情况、线程信息、HTTP 请求跟踪等。&#x1f680; 核心知识点 &#…...

构建高效 Python Web 应用:框架与服务器的选择及实践

构建高效 Python Web 应用&#xff1a;框架与服务器的选择及实践 flyfish 从选择合适的 Web 框架&#xff08;如 Flask 和 FastAPI&#xff09;到部署时选用适当的 Web 服务器&#xff08;如 Waitress、Gunicorn、uWSGI 和 Uvicorn&#xff09;的全过程。它不仅介绍了各个框架…...

LED灯闪烁实验:Simulink应用层开发

文章目录 1 阶段目标2 开发过程2.1 模型搭建2.2 模型仿真2.3 数据字典配置2.4 代码生成3 总结1 阶段目标 本文是《LED灯闪烁实验》的第三部分,会通过图文结合的方式,手把手带读者操作Simulink工具进行LED灯闪烁的应用层开发。 本章的开发可分解为如下若干过程: 方波输出建…...

在做题中学习(89):螺旋矩阵

解法&#xff1a;模拟 思路&#xff1a;创建ret数组&#xff0c;用变量标记原矩阵的行数和列数&#xff0c;遍历一个元素就push_back进ret数组&#xff0c;每次遍历完一行或一列&#xff0c;相应行/列数--&#xff0c;进行顺时针螺旋遍历到为0即可。 细节&#xff1a;要有边界…...

使用EasyExcel和多线程实现高效数据导出

​ 使用EasyExcel和多线程实现高效数据导出 1. 概述 在企业级应用中&#xff0c;数据导出是一个常见的需求。为了提高导出效率&#xff0c;尤其是在处理大量数据时&#xff0c;我们可以结合使用EasyExcel库和多线程技术。本文将详细介绍如何通过EasyExcel和多线程技术实现高…...

rabbitmq五种模式的实现——springboot

rabbitmq五种模式的实现——springboot 基础知识和javase的实现形式可以看我之前的博客 代码地址&#xff1a;https://github.com/9lucifer/rabbitmq4j-learning 一、进行集成 &#xff08;一&#xff09;Spring Boot 集成 RabbitMQ 概述 Spring Boot 提供了对 RabbitMQ 的自…...

每日学习Java之一万个为什么

9.Class <?> class1 Myclass.class 为什么要有通配符&#xff1f;传给谁用的&#xff1f; 首先&#xff0c;这里的class特指某个对象在JVM中的元数据集合。 有普通、接口、数组、基本类型、 void 类型、局部类、匿名类、枚举、注解 1.类型安全&#xff1a;通配符允许…...

寒假学习总结

整个寒假都走在数据结构与算法的路上&#xff0c;深入学习了其中多个板块&#xff0c;刷了一些与之对应的题目&#xff0c;下面来一期总结&#xff08;c&#xff09; &#xff08;emmm&#xff0c;主播在寒假试着去学习了几大语言的语法基础&#xff08;丢丢&#xff09; 如Ja…...

Java Web开发实战与项目——用户认证与授权模块开发

Web应用中&#xff0c;用户认证与授权是至关重要的功能&#xff0c;确保只有合法用户才能访问受保护的资源。Spring Security作为一个强大的安全框架&#xff0c;支持多种认证与授权方式。在本章节中&#xff0c;我们将深入探讨三种常见的用户认证与授权方案&#xff1a;基于To…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...