前端框架大比拼：2024年的Vue与React谁更胜一筹？_vue和react哪个厉害

复制代码

子组件通过参数的方式获取 props：

function Modal({ isOpen, title }) {
return (
{isOpen &&

{ title }

);
}
复制代码

### 结论


在传递 props 时，Vue 需要在属性前面额外添加指令，如果忘记添加指令会导致传递字符串。React 则不会有这种情况。  
 在子组件取值时，Vue 需要调用 defineProps 函数，React 通过函数的参数获取，更加自然。  
 综合对比，Vue 心智负担更大，React 则更加自然。这一轮 React 胜。


## Event


Vue 使用了模板语法，React 使用了 JSX 语法。所以在编写 HTML 上发生了变化。但我们仍然需要为元素添加鼠标事件、键盘事件等。事件的处理也是一个必须事情。


### Vue


Vue 处理事件通过 v-on 指令完成的，简写是 AT 符号（@）。

复制代码

### React


React 创建事件的方式和原生 HTML 几乎一致，区别是将绑定事件的属性名要求为驼峰命名法。

function NameAlert() {
const displayName = () => {
// TODO
}
return (
Show Name
);
}
复制代码

### 结论


React 更加自然，Vue 仍然是需要额外的操作符，如果忘记添加操作符，就会变成传递字符串的 props，React 则没有这个问题。这一轮 React 胜。


## State


两者都是数据驱动的响应式框架，那么管理状态就成了一个关键问题。


### Vue


在 Vue 中，通过 ref 或者 reactive 来创建状态。  
 两者的用法稍有不同，ref 是用来处理基础类型的状态的，而 reactive 通常处理引用类型的状态。  
 使用 ref 状态时需要通过 ref.value 来访问状态。

{{ firstname }}

{{ lastname }}

复制代码

监听某个状态变化的方法是 watch 和 watchEffect。  
 两者的区别是 watchEffect 会在最初运行一次。

import { watch, watchEffect } from ‘vue’;

watch(firstname, () => alert(‘firstname 改变了！’);

watchEffect(lastname, () => alert(‘lastname 改变了！’);
复制代码

### React


React 使用 useState 来创建状态。

import { useState } from ‘react’;

function ShowName() {
const [firstName, setFirstName] = useState(‘张’);
const [lastName, setLastName] = useState(‘三’);

console.log(firstName, lastName);

return (

{ firstname }

{ lastname }

)
}
复制代码

React 使用 useEffect Hook 来监听状态变化。这个 Hook 接受一个回调函数和一个依赖数组。当依赖数组中任意一个状态发生变化时，回调函数就会触发。

import { useEffect } from ‘React’;

useEffect(() => {
console.log(‘名字改变了!’);
}, [firstName, lastName]);
复制代码

### 结论


Vue 在创建状态和监听状态时分别提供了多种方式，我们在使用时需要考虑哪种情况该用哪种 API，而 React 分别只提供了一种方式，但是它同样可以做到应对各种情况。综合对比，Vue 心智负担更高，React 更简单。这一轮 React 胜。


## Ref


尽管两门框架都使用组件进行编程，但我们还是难免需要访问 DOM，比如添加动画、控制输入框焦点等。为了解决这类问题，两门框架都提供了 ref 的概念，使用它可以创建对 DOM 的引用。


### Vue


Vue 提供了 ref API。

复制代码

### React


React 提供了 useRef Hook。但是要访问 DOM，需要使用 ref.current 属性。

import { useRef } from ‘react’;

function MyName() {
const name = useRef(null);

handleBtnClick(() => {
name.current.focus();
});

return (

开始输入
)
}
复制代码

### 结论


几乎没什么区别，平。


## 双向数据绑定


我们在使用 input、select、textarea 这类元素的时候，输入的值需要和状态进行同步。而状态发生变化时，元素的值也应该被同步。这个功能被称作数据双向绑定。


### Vue


Vue 提供了 v-model 指令创建双向绑定。

复制代码

### React


React 没有为这项功能单独提供 API，但我们也可以实现。

import { useState } from ‘react’;

function MyComponent() {
[searchQuery, setSearchQuery] = useState(‘’);

const handleChange = (event) => {
setSearchQuery(event.target.value);
}

return (

);
}
复制代码

### 结论


从语法上看，Vue 更简洁。但是这会破坏单向数据流的原则，因为改变数据的方式不再是只有一种。React 的代码虽然不简洁，但更加容易追踪状态。这也是 React 和 Vue 在设计理念上的不同。在「让开发者写更少的代码」和「代码结构更加清晰易于维护」之间，Vue 选择了前者，React 选择了后者。至于谁好谁坏，个人更加倾向于后者，但是也有人倾向于前者。因为是取舍问题，平。


## 动态渲染


有些时候我们的组件是根据某些条件进行渲染的，这也就是动态渲染。


### Vue


Vue 提供了三个指令：v-if、v-else 和 v-show。

欢迎

请登录

登陆

复制代码 ```

React

React 没有为这种功能提供任何 API，而是使用原生 JavaScript 的条件语句，if、&& 或者是三元运算符等。

function MyComponent() {
  return (
    {isLoggedIn ? 
     <p>欢迎</p> :
     <p> 请登录 </p>
    }
    {!isLoggedIn && <button> 登陆 </button>}
  );
}
复制代码

结论

Vue 的语法是在元素上添加特殊的属性，而 React 的语法是纯粹的 JavaScript 语法。从语法上看，没有太大差别。但是 Vue 会有额外的学习成本。综合来看，这轮 React 略胜一筹。

渲染子组件

有时我们需要在组件中将子组件传递给其他组件一起渲染。

Vue

Vue 提供了 slot 来传递子组件。
容器组件：

<template>
  <div>


### 刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

* **前端字节跳动真题解析**  

  ![](https://img-blog.csdnimg.cn/img_convert/8d27500df7b25342f252bca635ca0ab3.png)

* **【269页】前端大厂面试题宝典**  

  ![](https://img-blog.csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。