React 和 Vue _使用区别

news2024/9/21 12:35:05

目录

一、框架介绍

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项目icon-default.png?t=N7T8https://blog.csdn.net/zxy19931069161/article/details/139147265?spm=1001.2014.3001.5501

React创建一个项目：

创建一个react项目icon-default.png?t=N7T8https://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=false
  state.div2Show=true
},3000)
//div1元素在3秒后消失，div2元素在3秒后出现。

</script>

<style scoped>
</style>

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

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

v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 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.coloradmin.cn/o/1957054.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

鸿蒙HarmonyOS开发：如何灵活运用服务卡片提升用户体验

鸿蒙HarmonyOS开发：如何灵活运用服务卡片提升用户体验

文章目录 一、ArkTS卡片相关模块二、卡片事件能力说明三、卡片事件的主要使用场景3.1、使用router事件跳转到指定UIAbility3.1.1、卡片内按钮跳转到应用的不同页面3.1.2、服务卡片的点击跳转事件 3.2、通过message事件刷新卡片内容3.2.1、在卡片页面调用postCardAction接口触发…
阅读更多...
【Redis】Centos7 安装 redis（详细教程）

【Redis】Centos7 安装 redis（详细教程）

查看当前 Redis 版本&#xff1a; 当前的 redis 版本太老了&#xff0c;选择安装 Redis5。 一、使用 yum 安装 1、首先安装 scl 源 yum install centos-release-scl-rh 由于我之前已经安装过了&#xff0c;所以加载速度比较快&#xff0c;且显示已经安装成功&#xff0c;是最…
阅读更多...
go-kratos 学习笔记(8) redis的使用

go-kratos 学习笔记(8) redis的使用

redis的在项目中的使用是很常见的&#xff0c;前面有了mysql的使用redis的也差不多&#xff1b;也是属于在data层的操作&#xff0c;所以需要新建一个 NewRedisCmd方法 在internal/data/data.go中新增NewRedisCmd 方法&#xff0c;注入到ProviderSet package dataimport (&quo…
阅读更多...
【Java】类与对象、封装（008）

【Java】类与对象、封装（008）

目录 类与对象 ♦️什么类与对象❓ &#x1f38f;类的定义 &#x1f383;定义一个类 &#x1f383;成员变量 &#x1f383;成员方法 &#x1f38f;对象的创建使用和引用传递 &#x1f383;对象的创建 &#x1f383;对象的引用 封装 ♦️什么是封装❓ ♦️实现封装 …
阅读更多...
太阳伴星2600万年回转周期，或许正是它，导致地球生物周期性灭绝？！

太阳伴星2600万年回转周期，或许正是它，导致地球生物周期性灭绝？！

我们知道地球已经有46亿年的寿命了&#xff0c;这相比人类生存的时间是极其漫长的。在地球历史中&#xff0c;恐龙在这里生活了1.6亿年&#xff0c;这是地球上相对独特的存在。当然&#xff0c;在恐龙的一生中&#xff0c;它们绝对是地球的统治者。当时&#xff0c;现在统治地球…
阅读更多...
stm32入门-----DMA直接存储器存取（上——理论篇）

stm32入门-----DMA直接存储器存取（上——理论篇）

目录 前言 DMA 1.简介 2.存储器映像 3.DMA结构 4.数据宽度与对齐 5.DMA工作示例 前言 本期我们就开始学习DMA直接存储器存取&#xff0c;DMA是一个数据装运的小助手&#xff0c;执行数据的搬运处理&#xff0c;减少了CPU的负担&#xff0c;在stm32中担当重要的工作。在前…
阅读更多...
《Milvus Cloud向量数据库指南》——不同开源向量数据库的适用数据规模及其技术特点深度剖析

《Milvus Cloud向量数据库指南》——不同开源向量数据库的适用数据规模及其技术特点深度剖析

在探讨向量数据库领域时，我们不得不提及多个备受瞩目的开源项目，它们各自以其独特的技术优势和适用场景赢得了广泛的关注。本文将深入剖析Milvus Cloud、Chroma、Weaviate、以及Qdrant这几个开源向量数据库在不同数据规模下的应用表现，以及它们各自的技术特点和优势。 引言…
阅读更多...
SS9283403 开发环境搭建（二）

SS9283403 开发环境搭建（二）

1.序 在前一篇“SS928&3403K开发环境搭建&#xff08;一&#xff09;”中已经借助Ebaina搭建好的ubuntu对开发板做了测试&#xff0c;这篇记录从零开始搭建SS928&3403K的开发环境&#xff1b; 2.开发前准备 下载VMware Workstation 16 Pro 16.1.0版本 下载ubuntu18.04…
阅读更多...
封装导出功能（export）

封装导出功能（export）

业务描述: 通过一个button按钮, 实现导出功能, 导出后文件保存到电脑上 目录 一. file-saver 介绍 二. 项目中应用 1. 安装 file-saver库 2.创建 util / exportExcel.js 3. 页面内引入, 使用 4. 页面反馈 展示 一. file-saver 介绍 file-saver是一个用于在前端导出文件…
阅读更多...
基于VueCli自定义创建Vue项目架子

基于VueCli自定义创建Vue项目架子

基于VueCli自定义创建Vue项目架子 一、VueCli 自定义创建项目1.1安装脚手架 (已安装)1.2.创建项目1.2.1选项1.2.2手动选择功能&#xff08;按空格可选中&#xff09;1.2.3选择vue的版本1.2.4是否使用history模式1.2.5选择css预处理1.2.6选择eslint的风格 &#xff08;eslint 代…
阅读更多...
正点原子imx6ull-mini-Linux驱动LED（新字符设备驱动）（3）

正点原子imx6ull-mini-Linux驱动LED（新字符设备驱动）（3）

经过前几节实验的实战操作&#xff0c;我们已经掌握了 Linux 字符设备驱动开发的基本步骤&#xff0c;字符 设备驱动开发重点是使用 register_chrdev 函数注册字符设备&#xff0c;当不再使用设备的时候就使用 unregister_chrdev 函数注销字符设备&#xff0c;驱动模块加载成功…
阅读更多...
Springboot原理相关

Springboot原理相关

目录 配置优先级 bean的管理 获取bean bean的作用域 第三方bean SpringBoot原理 自动配置 配置优先级 在springboot中优先级application.properties>application.yml>application.yaml 虽然支持多种格式配置文件&#xff0c;但是在项目开发中&#xff0c;推荐统…
阅读更多...
[MIT6.5840]MapReduce

[MIT6.5840]MapReduce

MapReduce Lab 地址 https://pdos.csail.mit.edu/6.824/labs/lab-mr.html 论文地址 https://static.googleusercontent.com/media/research.google.com/zh-CN//archive/mapreduce-osdi04.pdf 工作原理 简单来讲&#xff0c;MapReduce是一种分布式框架&#xff0c;可以用来处理…
阅读更多...
英伟达最强劲敌Groq一招绝杀GPU，反超GPT-4o mini2倍，AI大佬Karpathy：直接飞升AGI!

英伟达最强劲敌Groq一招绝杀GPU，反超GPT-4o mini2倍，AI大佬Karpathy：直接飞升AGI!

Llama 3.1 405B被吐槽太笨重？ 英伟达对手AI新星Groq一招绝杀：上LPU直接速度翻倍，直接让Llama 3.1飞升AGI! Meta 最新发布的 Llama 3.1 405B 的开源让AI圈不平静了！ 追捧者感慨"GPT-4o的能力已握在手中”，而批评者反驳说，大体量消耗这么多算力，有些结果跑得还不如GP…
阅读更多...
【内网】安装wget

【内网】安装wget

先是去RPM Search 下载了wget-1.24.5-2.1.x86_64.rpm这个包&#xff0c;结果安装的时候报一堆错 [rootlocalhost ~]# rpm -ivh wget-1.24.5-2.1.x86_64.rpm warning: wget-1.24.5-2.1.x86_64.rpm: Header V3 RSA/SHA512 Signature, key ID 29b700a4: NOKEY error: Failed dep…
阅读更多...
不同WEB下的的ApplicationContext的选择

不同WEB下的的ApplicationContext的选择

依赖 ApplicationContext类型选择 默认情况下&#xff0c;spring通过选择的web端的框架来选择使用哪个ApplicationContext子类&#xff0c;默认情况下我们一般使用spring mvc框架&#xff0c;这个时候AC的实现类为 org.springframework.boot.web.servlet.context.AnnotationC…
阅读更多...
docker安装mysql8自动备份脚本

docker安装mysql8自动备份脚本

引用&#xff1a;https://blog.csdn.net/leovnay/article/details/140585094 # 创建两个卷 docker volume ls docker volume create mysqlData docker volume create mysqlSQL# 运行容器 docker run -d --namemysql8 -p 3306:3306 -e MYSQL_ROOT_PASSWORDxxx -e TZAsia/Shangh…
阅读更多...
Java小抄｜Java中的List与Map转换

Java小抄｜Java中的List与Map转换

文章目录 1 List<User> 转Map<User.id,User>2 基础类型的转换&#xff1a;List < Long> 转 Map<Long,Long> 1 List 转Map<User.id,User> Map<Long, User> userMap userList.stream().collect(Collectors.toMap(User::getId, v -> v, …
阅读更多...
自闭症儿童上小学教育方法：个性化关怀，引领全面发展

自闭症儿童上小学教育方法：个性化关怀，引领全面发展

在教育的征程中&#xff0c;为自闭症儿童提供适合他们的小学教育方法至关重要。这些孩子如同独特的星星&#xff0c;需要我们用个性化的关怀去照亮他们的成长之路&#xff0c;引领他们实现全面发展。 个性化关怀是自闭症儿童小学教育的核心。每个孩子都是独一无二的&#xff0c…
阅读更多...
钡铼技术PLC网关：实现PLC数据无缝对接MQTT协议

钡铼技术PLC网关：实现PLC数据无缝对接MQTT协议

MQTT 协议概述 MQTT 是用于物联网的标准消息传递协议。它被设计为一种非常轻量级的发布/订阅消息传送&#xff0c;非常适合以较小的代码占用量和网络带宽连接远程设备。 PLC网关是一种专门设计用于连接可编程逻辑控制器&#xff08;PLC&#xff09;与其它网络设备或系统的中间…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023