React 和 Vue _使用区别

目录

一、框架介绍

1.Vue

2.React

?二、框架结构

1.创建应用

2.框架结构

三、使用区别

1.单页面组成

2.样式

3.显示响应式数据

4.响应式html标签属性

5.控制元素显隐

6.条件渲染

7.渲染列表


react和vue是目前前端比较流行的两大框架,前端程序员应该将两种框架都掌握,本文总结一些基本知识点的使用区别。

一、框架介绍

1.Vue

Vue 是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点,Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景,你可以用不同的方式使用 Vue:

  • 无需构建步骤,渐进式增强静态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 静态站点生成 (SSG)
  • 开发桌面端、移动端、WebGL,甚至是命令行终端中的界面
2.React

React是一个声明式的,高效的,并且灵活的用于构建用户界面的 JavaScript 库。

它允许您使用”components(组件)“(小巧而独立的代码片段)组合出各种复杂的UI。它具有组件化、虚拟DOM、单向数据流、JSX语法等特点。

它适用于构建单页应用程序、移动应用程序和桌面应用程序,具有庞大的生态系统和丰富的工具支持。React的组件化和可重用性使得开发人员能够以模块化的方式构建和组织应用程序,提高代码的可读性、可维护性和可测试性。通过使用React,开发人员可以构建复杂的、交互式的Wb应用程序,并在不同平台上实现代码的共享和复用。


二、框架结构

1.创建应用

Vue创建一个项目:

创建一个vue项目[这里是图片001]https://blog.csdn.net/zxy19931069161/article/details/139147265?spm=1001.2014.3001.5501

React创建一个项目:

创建一个react项目[这里是图片002]https://blog.csdn.net/zxy19931069161/article/details/140011785?spm=1001.2014.3001.5501


2.框架结构

左侧React(ts版本)项目目录结构,右侧vue(js版本)项目目录结构。


三、使用区别

1.单页面组成

vue页面:

vue一个页面的组成,一个.vue文件包括了HTML、CSS、javascript。

App.vue:

<template><div></div>
</template><script>
//这部分是javascript代码
</script><style>
// 样式
</style>

react页面:

react的css在一个单独页面,html和jsvascript,在同一个页面。

新建一个文件夹test,test下新建两个文件,一个index.css (或者是index.scss , 最好用scss), 一个index.tsx(或者index.jsx , 这取决于你新建项目时选择的js还是ts)。

index.css

.btn{color:red;
}

index.tsx

function MyButton() {return (<button className="btn">I'm a button</button>);
}export default function MyApp() {console.log("页面初始化")return (<div><h1>Welcome to my app</h1><MyButton /></div>);
}

上面所使用的标签语法被称为 JSX。它是可选的,但大多数 React 项目会使用 JSX,主要是它很方便。JSX 比 HTML 更加严格。你必须闭合标签,如 <br />。你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中,比如 <div>...</div> 或使用空的 <>...</> 包裹.。


2.样式

vue页面:

App.vue:

<template><div class="box"><div style="width:60px"></div></div>
</template><script>
//这部分是javascript代码
</script><style scoped>
.box{background:red;
}
</style>

在vue里面,使用 class 为html元素命名。行内元素使用style=""的方式更改。

scoped属性进行限定css作用域,当<style>标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。vue中的scoped属性,其实就是给每一个dom节点元素都添加了不重复的自定义属性(如:data-v-6810cbe5),然后编译时再给样式的末尾添加属性选择器?进行样式私有化(如.btn[data-v-6810cbe5])。

react页面:

index.css

.btn{color:red;
}

index.tsx

function MyButton() {return (<button className="btn">I'm a button</button>);
}export default function MyApp() {console.log("页面初始化")return (<div><h1 style={{color:"#eff"}}>Welcome to my app</h1><MyButton /></div>);
}

在react里面,使用 className 为html元素命名。行内元素使用style={{}}的方式更改。

在上面示例中,style={{}} 并不是一个特殊的语法,而是 style={ } JSX 大括号内的一个普通 {} 对象。当你的样式依赖于 JavaScript 变量时,你可以使用 style 属性。

react没有scoped,就会导致所有样式的className命名不能相同,否则不同页面会有干扰。我们可以使用依赖包来实现scoped的效果。

react 仿 vue 的 scoped:

①首先下载包

npm i styled-components

②在页面使用

import styled from 'styled-components';const Container = styled.div`display: flex;justify-content: center;align-items: center;height: 100vh;
`;function App() {return (<Container><h1>Hello, Scoped Styles!</h1></Container>);
}export default App;

3.显示响应式数据

vue页面:

<template><div>对话:{{divContent}}</div><div>计数:{{count}}</div>
</template><script setup>
import {ref, reactive, toRefs} from "vue";const count = ref(0)const state = reactive({divContent: "你好呀,今天天气真好",
});const {isShowDiv,
} = toRefs(state);setTimeout(()=>{state.divContent="你吃饭了吗?"
},3000)
//三秒后div内文字变为,你吃饭了吗?</script><style scoped>
</style>

div内展示数据 {{}} 的方式 叫文本插值,它使用的是“Mustache”语法 (即双大括号)。

ref , reactive 和 toRefs ,是vue中明响应式状态的函数。当你在模板中使用了他们定义的变量,然后改变了这个 变量 的值时,Vue 会自动检测到这个变化,并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。

react页面:

import { useState } from "react";function App() {// content是内容,setContent是改变内容时用的方法const [content, setContent] = useState("今天天气真好")setTimeout(()=>{setContent("您吃了吗?")},3000)
//3秒后文字内容变成,您吃了吗?return (<div>{content}</div>);
}export default App;

div内展示数据使用 {} 。useState 是一个 React Hook,它允许你向组件添加一个状态变量。


4.响应式html标签属性

vue页面:

<template><div :title="content"></div>
</template><script setup>
import {reactive, toRefs} from "vue";const state = reactive({content: "鼠标悬浮显示,你好",
});const {content,
} = toRefs(state);setTimeout(()=>{state.content="鼠标悬浮显示,你吃饭了吗?"
},3000)</script><style scoped>
</style>

:title=“content” , :是v-bind的缩写,动态的绑定一个或多个 attribute,也可以是组件的 prop。

react页面:

import { useState } from "react";function App() {// content是鼠标悬浮内容,setContent是改变鼠标悬浮内容时用的方法const [content, setContent] = useState("今天天气真好")setTimeout(()=>{setContent("您吃了吗?")},3000)
//3秒后鼠标悬浮文字内容变成,您吃了吗?return (<div title={content}>鼠标悬浮显示标题</div>);
}export default App;

title={content} , {}内为变量。


5.控制元素显隐

vue页面:

<template><div v-if="div1Show"></div><div v-show="div2Show"></div>
</template><script setup>
import {reactive, toRefs} from "vue";const state = reactive({div1Show: true,div2Show: false,
});const {div1Show,div2Show,
} = toRefs(state);setTimeout(()=>{state.div1Show=falsestate.div2Show=true
},3000)
//div1元素在3秒后消失,div2元素在3秒后出现。</script><style scoped>
</style>

v-if ,vi-show基于表达式值的真假性,来改变元素的可见性。

v-if元素被触发,元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假,那么其内部的内容根本都不会被渲染。

v-show通过设置内联样式的displayCSS 属性来工作,当元素可见时将使用初始display值。当条件为false时,display值为 none 。

react页面:

import { useState } from "react";function App() {const [show, setShow] = useState(false)setTimeout(()=>{setShow(true)},3000)
//3秒后元素可见return (<div>{show && <div>三秒后可见哦~</div>}{show ? <div>show为true,显示我</div> : ""}</div>);
}export default App;

使用 && 或者三元运算符来判断显隐。


6.条件渲染

vue页面:

<template><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div>
</template><script setup>
import {reactive, toRefs} from "vue";const state = reactive({type:"A",
});const {type,
} = toRefs(state);setTimeout(()=>{state.type="C"
},3000)</script><style scoped>
</style>

和 if(){} else if(){} else if(){} else{} 同。控制元素的显隐。

react页面:

import { useState } from "react";function App() {const [show, setShow] = useState(false)setTimeout(()=>{setShow(true)},3000)
//3秒后元素可见if (show) {content = <AdminPanel />;
} else {content = <LoginForm />;
}return (<div>{show && <div>三秒后可见哦~</div>}{show ? <div>show为true,显示我</div> : <div>show为false,显示我</div>}{content}</div>);
}export default App;

使用if(){}else{}判断,或使用 && 或使用三元运算符来进行条件渲染。


7.渲染列表

vue页面:

<template><div v-for="(item,index) in list">{{item}}</div>
</template><script setup>
import {reactive, toRefs} from "vue";const state = reactive({list:[1,2,3,4],
});const {list,
} = toRefs(state);</script><style scoped>
</style>

v-for,基于原始数据多次渲染元素或模板块。

react页面:

import { useState } from "react";function App() {const products = [{ title: 'Cabbage', id: 1 },{ title: 'Garlic', id: 2 },{ title: 'Apple', id: 3 },];const listItems = products.map(product =><li key={product.id}>{product.title}</li>);return (<ul>{listItems}</ul>);}export default App;

使用[].map循环遍历。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/487600.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于多视角深度学习技术的乳腺X线分类:图神经网络与Transformer架构的研究|文献速递-生成式模型与transformer在医学影像中的应用速递

Title 题目 Mammography classification with multi-view deep learning techniques:Investigating graph and transformer-based architectures 基于多视角深度学习技术的乳腺X线分类&#xff1a;图神经网络与Transformer架构的研究 01 文献速递介绍 乳腺X线检查是乳腺癌…

SQL项目实战与综合应用——项目设计与需求分析

项目设计与需求分析是软件开发过程中的核心环节&#xff0c;尤其在涉及数据库的应用时&#xff0c;良好的设计将直接影响到项目的可扩展性、性能和维护性。本文将深入探讨数据库设计的最佳实践&#xff0c;结合 C 与 SQL 的实际应用场景&#xff0c;涵盖项目需求收集、数据库设…

【HarmonyOS学习日志(13)】计算机网络之TCP/IP协议族(二)

文章目录 TCP/IP协议族ARPDNS标志字段&#xff1a;协商具体的通信方式和反馈通信状态DNS查询问题的格式资源记录&#xff08;Resource Record, RR&#xff09;格式&#xff1a;被用于应答字段、授权字段和额外信息字段 IP协议IP服务的特点无状态无连接不可靠 IP头部结构IPv4头部…

GO并发编程

一、并发编程初体验和问题 关于 Go 语言和线程的关系 Go 语言中存在线程。Go 语言的并发模型是基于 Goroutine、Processor&#xff08;P&#xff09;和 Machine&#xff08;M&#xff0c;操作系统线程&#xff09;的 GMP 模型。Goroutine 是 Go 语言中轻量级的执行单元&#xf…

初次使用uniapp编译到微信小程序编辑器页面空白,真机预览有内容

uniapp微信小程序页面结构 首页页面代码 微信小程序模拟器 模拟器页面为空白时查了下&#xff0c;有几个说是“Hbuilder编译的时候应该编译出来一个app.js文件 但是却编译出了App.js”&#xff0c;但是我的小程序结构没问题&#xff0c;并且真机预览没有问题 真机调试 根据defi…

车载语音的台架和实车测试分析

在车载测试过程中免不了要对一些特殊的业务进行深度的专项测试。比如语音识别&#xff0c;这个技术在汽车上也不算什么新技术&#xff0c;但是涉及到用户的使用&#xff0c;更加涉及操作的安全性&#xff0c;所以这块测试还是很重要的。 那么要做好语音识别的业务专项测试&…

【蓝桥杯每日一题】砍竹子

砍竹子 2024-12-7 蓝桥杯每日一题 砍竹子 STL 贪心 题目大意 这天, 小明在砍竹子, 他面前有 nn 棵竹子排成一排, 一开始第 ii 棵竹子的 高度为 h i h_i hi​. 他觉得一棵一棵砍太慢了, 决定使用魔法来砍竹子。魔法可以对连续的一 段相同高度的竹子使用, 假设这一段竹子的高度为…

Vue实现购物车(纯操作数据,不操作dom)注意:自己引入Vue.js哦

代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title>&l…

ThinkPHP开发的原生微信小程序二手物品回收小程序管理系统源码

二手物品回收小程序 一款基于ThinkPHP开发的原生微信小程序二手物品回收小程序管理系统。支持线上下单、免费上门取件、评估价格等功能。提供全部无加密源码&#xff0c;支持私有化部署。

C#实现一个HttpClient集成通义千问-多轮对话功能实现

多轮对话功能实现 视频教程实现原理消息的类型 功能开发消息类修改请求体修改发送请求函数修改用户消息输入 多轮对话的token消息完整文档消息类型 视频教程 .NetAI开发入门HttpClient实现通义千问集成-多轮对话功能实现 实现原理 一直保留更新messages 现在设置的meessages只…

vite5+vue3+Ts5 开源图片预览器上线

images-viewer-vue3&#xff1a;一款Vue3的轻量级图像查看器&#xff0c;它基于Flip动画技术&#xff0c;支持PC和h5移动网页预览照片&#xff0c;如果它是Vue3开发的产品。 npm开源地址:https://www.npmjs.com/package/images-viewer-vue3?activeTabreadme Flip 动画 < …

Axure RP在智慧农场可视化大屏系统设计中的应用

随着科技的飞速发展&#xff0c;智慧农业已成为现代农业的重要发展方向。智慧农场可视化大屏系统作为智慧农业的重要组成部分&#xff0c;正逐步成为农场管理、决策和展示的核心工具。Axure RP&#xff0c;作为一款强大的原型设计工具&#xff0c;其在智慧农场可视化大屏系统的…

Docker多架构镜像构建踩坑记

背景 公司为了做信创项目的亮点&#xff0c;需要将现有的一套在X86上运行的应用系统迁移到ARM服务器上运行&#xff0c;整个项目通过后端Java&#xff0c;前端VUEJS开发通过CICD做成Docker镜像在K8S里面运行。但是当前的CICD产品不支持ARM的镜像构建&#xff0c;于是只能手工构…

文档解析:如何从PDF中解析出表格结构和数据?

从PDF中解析出表格结构和数据&#xff0c;可以采用以下几种方法&#xff1a;从PDF中解析出表格结构和数据&#xff0c;主要用到以下算法和技术&#xff1a; OCR技术&#xff1a;光学字符识别技术&#xff0c;用于从扫描的PDF文件中提取文本信息&#xff0c;包括表格数据。这项…

克服大规模语言模型限制,构建新的应用方法——LangChain

大模型 大模型的出现和落地开启了人工智能(AI)新一轮的信息技术革命&#xff0c;改变了人们的生 活方式、工作方式和思维方式。大模型的落地需要数据、算力和算法三大要素。经过几 年发展&#xff0c;大模型的数据集(包括多模态数据集)制作已经形成了规约&#xff0c;Meta、Go…

两种距离度量简记

一、Lp距离/Minkowski 距离&#xff08;Minkowski distance&#xff09; 1、Lp距离&#xff1a; 特征空间中两个实例点的距离是两个实例点相似程度的反映。Lp距离是一种一般化的距离度量 设特征空间x是n维实数向量空间Rn xi&#xff0c;xj的Lp距离定义为&#xff08;p>1&…

读取电视剧MP4视频的每一帧,检测出现的每一个人脸并保存

检测效果还不错,就是追踪有点难做 import cv2 import mediapipe as mp import os from collections import defaultdict# pip install msvc-runtime# 初始化OpenCV的MultiTracker # multi_tracker = cv2.MultiTracker_create() # multi_tracker = cv2.legacy.MultiTracker_cre…

用最小的代价解决mybatis-plus关于批量保存的性能问题

1.问题说明 问题背景说明&#xff0c;在使用达梦数据库时&#xff0c;mybatis-plus的serviceImpl.saveBatch()方法或者updateBatchById()方法的时候&#xff0c;随着数据量、属性字段的增加&#xff0c;效率越发明显的慢。 serviceImpl.saveBatch(); serviceImpl.updateBatch…

OpenCV相机标定与3D重建(10)眼标定函数calibrateHandEye()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算手眼标定&#xff1a; g T c _{}^{g}\textrm{T}_c g​Tc​ cv::calibrateHandEye 是 OpenCV 中用于手眼标定的函数。该函数通过已知的机器人…

flink yarn模式3种提交任务方式

接上文&#xff1a;一文说清flink从编码到部署上线 1.引言 Apache Hadoop的Yarn是许多数据处理框架中非常流行的资源提供者。Flink的服务提交给Yarn的ResourceManager后&#xff0c;ResourceManager会在由Yarn的NodeManager管理的机器上动态分配运行容器。Flink在这些容器上部…