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项目

https://blog.csdn.net/zxy19931069161/article/details/139147265?spm=1001.2014.3001.5501
React创建一个项目：
创建一个react项目

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：

1. <template>
2.   <div>
3.   </div>
4. </template>
6. <script>
7. //这部分是javascript代码
8. </script>
10. <style>
11. // 样式
12. </style>

复制代码

react页面：
react的css在一个单独页面，html和jsvascript，在同一个页面。
新建一个文件夹test，test下新建两个文件，一个index.css (或者是index.scss ， 最好用scss), 一个index.tsx（或者index.jsx , 这取决于你新建项目时选择的js还是ts）。
index.css

1. .btn{
2.     color:red;
3. }

复制代码

index.tsx

1. function MyButton() {
2.   return (
3.     <button className="btn">
4.       I'm a button
5.     </button>
6.   );
7. }
10. export default function MyApp() {
12. console.log("页面初始化")
14.   return (
15.     <div>
16.       <h1>Welcome to my app</h1>
17.       <MyButton />
18.     </div>
19.   );
20. }

复制代码

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

---

2.样式

vue页面：
App.vue:

1. <template>
2.   <div class="box">
3.       <div style="width:60px"></div>
4.   </div>
5. </template>
7. <script>
8. //这部分是javascript代码
9. </script>
11. <style scoped>
12. .box{
13.   background:red;
14. }
15. </style>

复制代码

在vue里面，使用 class 为html元素定名。行内元素使用style=""的方式更改。
scoped属性举行限定css作用域，当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。vue中的 scoped 属性，实在就是给每一个dom节点元素都添加了不重复的自定义属性（如：data-v-6810cbe5），然后编译时再给样式的末尾添加  属性选择器 举行样式私有化（如.btn[data-v-6810cbe5]）。
react页面：
 index.css

1. .btn{
2.     color:red;
3. }

复制代码

index.tsx

1. function MyButton() {
2.   return (
3.     <button className="btn">
4.       I'm a button
5.     </button>
6.   );
7. }
10. export default function MyApp() {
12. console.log("页面初始化")
14.   return (
15.     <div>
16.       <h1 style={{color:"#eff"}}>Welcome to my app</h1>
17.       <MyButton />
18.     </div>
19.   );
20. }

复制代码

在react里面，使用 className 为html元素定名。行内元素使用style={{}}的方式更改。
在上面示例中，style={{}} 并不是一个特别的语法，而是 style={ } JSX 大括号内的一个普通 {} 对象。当你的样式依赖于 JavaScript 变量时，你可以使用 style 属性。
react没有scoped,就会导致所有样式的className定名不能相同，否则不同页面会有干扰。我们可以使用依赖包来实现scoped的效果。
react 仿 vue 的 scoped:
①起首下载包

1. npm i styled-components

复制代码

②在页面使用

1. import styled from 'styled-components';
3. const Container = styled.div`
4.   display: flex;
5.   justify-content: center;
6.   align-items: center;
7.   height: 100vh;
8. `;
10. function App() {
11.   return (
12.     <Container>
13.       <h1>Hello, Scoped Styles!</h1>
14.     </Container>
15.   );
16. }
18. export default App;

复制代码

---

3.表现响应式数据

vue页面：

1. <template>
2.   <div>对话：
3.      {{divContent}}
4.   </div>
5.   <div>计数：
6.      {{count}}
7.   </div>
8. </template>
10. <script setup>
11. import {ref, reactive, toRefs} from "vue";
13. const count = ref(0)
15. const state = reactive({
16.   divContent: "你好呀，今天天气真好",
17. });
19. const {
20.   isShowDiv,
21. } = toRefs(state);
23. setTimeout(()=>{
24.   state.divContent="你吃饭了吗？"
25. },3000)
26. //三秒后div内文字变为，你吃饭了吗？
28. </script>
30. <style scoped>
31. </style>

复制代码

div内展示数据 {{}} 的方式 叫文本插值，它使用的是“Mustache”语法 (即双大括号)。
ref , reactive 和 toRefs  ,是vue中明响应式状态的函数。当你在模板中使用了他们定义的变量，然后改变了这个 变量 的值时，Vue 会自动检测到这个变化，而且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。
react页面：

1. import { useState } from "react";
3. function App() {
5.   // content是内容，setContent是改变内容时用的方法
6.   const [content, setContent] = useState("今天天气真好")
8. setTimeout(()=>{
9.    setContent("您吃了吗？")
10.   },3000)
11. //3秒后文字内容变成，您吃了吗？
13.   return (
14.     <div>
15.      {content}
16.     </div>
17.   );
18. }
20. export default App;

复制代码

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

---

4.响应式html标签属性

 vue页面：

1. <template>
2. <div :title="content"></div>
3. </template>
5. <script setup>
6. import {reactive, toRefs} from "vue";
8. const state = reactive({
9.   content: "鼠标悬浮显示，你好",
10. });
12. const {
13.   content,
14. } = toRefs(state);
16. setTimeout(()=>{
17.   state.content="鼠标悬浮显示，你吃饭了吗？"
18. },3000)
20. </script>
22. <style scoped>
23. </style>

复制代码

:title="content" ， ：是v-bind的缩写，动态的绑定一个或多个 attribute，也可以是组件的 prop。
react页面：

1. import { useState } from "react";
3. function App() {
5.   // content是鼠标悬浮内容，setContent是改变鼠标悬浮内容时用的方法
6.   const [content, setContent] = useState("今天天气真好")
8. setTimeout(()=>{
9.    setContent("您吃了吗？")
10.   },3000)
11. //3秒后鼠标悬浮文字内容变成，您吃了吗？
13.   return (
14.     <div title={content}>鼠标悬浮显示标题
15.     </div>
16.   );
17. }
19. export default App;

复制代码

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

---

5.控制元素显隐

 vue页面：

1. <template>
2. <div v-if="div1Show"></div>
3. <div v-show="div2Show"></div>
4. </template>
6. <script setup>
7. import {reactive, toRefs} from "vue";
9. const state = reactive({
10.   div1Show: true,
11.   div2Show: false,
12. });
14. const {
15.   div1Show,
16.   div2Show,
17. } = toRefs(state);
19. setTimeout(()=>{
20.   state.div1Show=false
21.   state.div2Show=true
22. },3000)
23. //div1元素在3秒后消失，div2元素在3秒后出现。
25. </script>
27. <style scoped>
28. </style>

复制代码

v-if ,vi-show基于表达式值的真假性，来改变元素的可见性。
当 v-if 元素被触发，元素及其所包含的指令/组件都会烧毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。
v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件为false时，display值为 none 。
react页面：

1. import { useState } from "react";
3. function App() {
5.   const [show, setShow] = useState(false)
7. setTimeout(()=>{
8.    setShow(true)
9.   },3000)
10. //3秒后元素可见
12.   return (
13.     <div>
14.         {show && <div>三秒后可见哦~</div>}
15.         {show ? <div>show为true,显示我</div> : ""}
16.     </div>
17.   );
18. }
20. export default App;

复制代码

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

---

6.条件渲染

 vue页面：

1. <template>
2. <div v-if="type === 'A'">
3.    A
4. </div>
5. <div v-else-if="type === 'B'">
6.    B
7. </div>
8. <div v-else-if="type === 'C'">
9.    C
10. </div>
11. <div v-else>
12.    Not A/B/C
13. </div>
14. </template>
16. <script setup>
17. import {reactive, toRefs} from "vue";
19. const state = reactive({
20.   type:"A",
21. });
23. const {
24.   type,
25. } = toRefs(state);
27. setTimeout(()=>{
28.   state.type="C"
29. },3000)
31. </script>
33. <style scoped>
34. </style>

复制代码

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

1. import { useState } from "react";
3. function App() {
5.   const [show, setShow] = useState(false)
7. setTimeout(()=>{
8.    setShow(true)
9.   },3000)
10. //3秒后元素可见
12. if (show) {
13.   content = <AdminPanel />;
14. } else {
15.   content = <LoginForm />;
16. }
18.   return (
19.     <div>
20.         {show && <div>三秒后可见哦~</div>}
21.         {show ? <div>show为true,显示我</div> : <div>show为false,显示我</div>}
22.         {content}
23.     </div>
24.   );
25. }
27. export default App;

复制代码

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

---

7.渲染列表

 vue页面：

1. <template>
2. <div v-for="(item,index) in list">
3.    {{item}}
4. </div>
5. </template>
7. <script setup>
8. import {reactive, toRefs} from "vue";
10. const state = reactive({
11.   list:[1,2,3,4],
12. });
14. const {
15.   list,
16. } = toRefs(state);
18. </script>
20. <style scoped>
21. </style>

复制代码

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

1. import { useState } from "react";
3. function App() {
5. const products = [
6.    { title: 'Cabbage', id: 1 },
7.    { title: 'Garlic', id: 2 },
8.    { title: 'Apple', id: 3 },
9. ];
11. const listItems = products.map(product =>
12.    <li key={product.id}>
13.      {product.title}
14.    </li>
15. );
17. return (
18.    <ul>{listItems}</ul>
19. );
21. }
23. export default App;

复制代码

使用[].map循环遍历。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。