Web开发你是选择VUE还是REACT，卷王（😎）：我都要❗❗❗

前言

昨天晚上学校的学长来给我们分享前端框架的学习方法说我们可以选择学习vue或者react这两种比较火的，（嗯。。。我当时再心里思考着该怎么选）这时候大佬就开口了：不用选！我都要！就这个大环境肯定是要统统拿下啊！ ------ 嗯？好好好！下面这是我昨天晚上刚入门学习Vue和React的，看看大佬们觉得该如何选择呢？

Vue OR React

Vue：

Vue.js（简称 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架（如 Angular 和 React）不同，Vue 设计的目标是逐步采用，可以逐步集成到现有项目中，或者通过 Vue CLI 完整地构建一个现代的单页应用（SPA）。Vue 是一个开源的框架，具有简洁、易用、高效的特点，尤其适合前端开发人员在构建现代化、交互性强的用户界面时使用。

下面是一个简单的Vue应用示例。它会展示一个计数器（count ：0），和一个用来动态加这个计时器的按钮：

js 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Vue3 Couter</title>
 <!-- vue 3 
 <script src="./vue.js"></script>
</head>
<body>
 <div id="root">
    <h1>{{str}}走向 {{LLM}}智能前端！</h1>
   <p>Count: {{count}}</p>
   <button @click="increment">+1</button>
 </div>
 <script type="module">
 const {
   createApp, 
   ref
 } = Vue

 createApp({
   setup(){
       const count=ref(0)
       const str=ref("hello vue")
       const increment=()=>{
           count.value++;
       }
       return {
           count,
           str,
           increment
       }
   }  
 }).mount('#root')
 </script>
</body>
</html>

代码解释：

首先你要引入 Vue 3 的 CDN，但是因为我找的链接不稳定所以我就将cdn下载到本地了。

那CDN是什么呢？是一种通过一组分布在不同地理位置的服务器来优化互联网内容传输的技术。它的目标是提高网站、应用程序和其他在线服务的加载速度、可靠性和性能。它会将常用的静态资源（如图片、视频、CSS、JavaScript 文件等）缓存到边缘服务器上。当用户请求这些资源时，边缘服务器直接响应，减少了访问源服务器的次数，从而降低了负载。

<div id="root"> 在这里我们设置了一个元素将其id命名为root 在vue中它相对于一个挂载点。

那什么是挂载点？

挂载点（Mounting Point）是指你将 Vue 应用实例连接到 HTML 页面中的一个特定 DOM 元素上。这个 DOM 元素通常是一个空的容器元素，Vue 会把应用的内容渲染到该元素内部，并且由 Vue 来管理这个元素及其内部的所有子元素和组件。

那它是怎么工作的？

#root ：是一个选择器，指向页面中的一个 DOM 元素（通过 id="root" 来标识）。当你在 Vue 应用中调用 .mount('#root') 时，Vue 会将整个应用的根组件渲染到具有 id="root" 的 DOM 元素中。这是 Vue 应用的初始化过程，意味着所有的模板、数据、事件处理等都将与这个 DOM 元素及其子元素关联起来。

createApp ：这是 Vue 3 中用于创建应用实例的函数。通过调用 createApp()，你可以初始化一个新的 Vue 应用，并且可以在该应用实例上注册组件、指令、插件等

setup()是一个核心函数，它主要用来定义属性的响应式状态它与ref()响应式引用 同时使用可以实现数据更新你的vue也会更新。

效果

接下来我们来看看react实现这个功能是怎么样的吧

React

React 是一个用于构建用户界面的 JavaScript 库 ，由 Facebook 开发并维护。它使得构建复杂的 UI 变得更加简洁和高效。React 的核心思想是 组件化 、声明式 编程和 虚拟 DOM，通过这些特性，它能够帮助开发者快速构建和管理动态的 web 应用。

下面是一个简单的Vue应用示例

js 复制代码

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>React Counter Example</title>
    <!-- 引入 React -->
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<!-- 引入 ReactDOM -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<!-- 引入 Babel -->
<script src="https://unpkg.com/@babel/standalone@7.20.0/babel.min.js"></script>

</head>
<body>
    <!-- 应用程序挂载点 -->
    <div id="root"></div>
    <script type="text/babel">
        // 函数
        const  {
            useState
        }=React;
        function Counter(){
            const [count ,setCount]=useState(0);//数据状态 解构赋值
            const increment=()=>{
                setCount(count+1);
            }
            return(
                <div>
                    Count: {count}
                    <button onClick={increment}>+1</button>
                 </div>   
            )
        }
        ReactDOM.render(<Counter/>,document.getElementById('root'))
    </script>
</body>
</html>

与vue一样react也有挂载点

React 使用 useState Hook 来管理组件状态。useState 返回一个数组，第一个元素是当前状态，第二个元素是更新状态的函数。

例如：const [count, setCount] = useState(0); 这里的 count 是状态值，setCount 是更新状态的函数。 increment ：这个函数用于更新状态，每次点击按钮时，count 会加 1。setCount(count + 1) 会触发 React 重新渲染组件。 ReactDOM.render(<Counter/>,document.getElementById('root'))

这行代码将 Counter 组件渲染到页面上的 id="root" 的 <div> 中。

ReactDOM.render 用来渲染 React 组件，<Counter /> 是要渲染的组件，document.getElementById('root') 是挂载点。

差别

开发工具和构建工具：

React：
- 使用了 React、ReactDOM 和 Babel 的 CDN 链接。Babel 是一个 JavaScript 编译器，允许我们在浏览器中直接使用 JSX 语法（React 使用的 HTML 类似语法）。React 的代码被编译为原生 JavaScript。
- React 不需要复杂的构建工具，使用 CDN 可以在不借助打包工具的情况下直接使用它。
Vue 3：
- Vue 3 的代码使用了 type="module"，这意味着它通过现代浏览器的原生模块功能来加载脚本。在 Vue 3 中，createApp 是创建 Vue 应用的核心函数，它可以通过模块加载系统处理。
- Vue 3 的代码也是直接用 CDN 引入的，没有使用构建工具。

2. 框架特性对比：

React：
- JSX：React 使用 JSX，这使得 JavaScript 和 HTML 的写法混合在一起。JSX 需要通过 Babel 编译成普通的 JavaScript 代码。JSX 提供了更接近 HTML 的语法，但本质上它是 JavaScript。
- 函数组件和 Hooks ：React 使用函数组件来构建 UI，使用 useState Hook 来管理状态。函数组件是 React 推荐的方式。
Vue 3：
- 模板语法 ：Vue 使用的是模板语法（{{ }}），它通过声明式语法使得 UI 更易于理解。Vue 的模板类似于 HTML，但与 JavaScript 紧密结合。
- Composition API（setup） ：Vue 3 引入了 Composition API，使用 setup 函数来定义组件的状态和行为。通过 ref 来创建响应式的状态，ref 可以理解为 Vue 中的响应式数据。

3. 状态管理：

React：
- React 使用 useState Hook 来管理组件状态。useState 返回一个数组，第一个元素是当前状态，第二个元素是更新状态的函数。
- 例如：const [count, setCount] = useState(0); 这里的 count 是状态值，setCount 是更新状态的函数。
Vue 3：
- Vue 3 使用 ref 来创建响应式数据。ref 是 Vue 的响应式引用，count.value 就是该值的存储。ref 是一个简单的封装对象，它的 value 属性可以用来获取或设置值。
- 例如：const count = ref(0); 然后 count.value 就可以访问或更新这个值。

4. 事件处理：

React：
- 在 React 中，事件处理是通过在 JSX 元素上使用 onEventName 这样的语法来绑定事件。例如，点击按钮时调用 increment 方法：<button onClick={increment}>+1</button>。
- React 事件处理的特点是函数名是小驼峰式（例如 onClick）。
Vue 3：
- 在 Vue 中，事件处理使用 @click 或 v-on:click 来绑定事件。例如，点击按钮时调用 increment 方法：<button @click="increment">+1</button>。
- Vue 事件处理的语法简洁，支持指令形式（如 @click）来绑定事件。

5. 模板与渲染方式：

React：
- React 通过 ReactDOM.render 来渲染组件，将 JSX 编译成 JavaScript 代码并渲染到页面中。
- React 的渲染函数在组件内，组件内容是动态生成的 HTML。
Vue 3：
- Vue 的模板通过 createApp 和 mount 来挂载应用，Vue 会根据模板和 data 中的状态自动更新 DOM。
- Vue 使用的是声明式渲染，模板中通过 {{}} 来插入动态数据，并且 Vue 会自动管理数据变化。

6. 组件的定义方式：

React：
- React 组件是通过函数或类定义的。在这个示例中，使用的是 函数组件。
- 函数组件通过 useState Hook 来处理状态和副作用。
Vue 3：
- Vue 3 组件是通过 createApp 和 setup 函数来定义的。setup 函数是 Vue 3 引入的 Composition API 的核心，里面定义了响应式数据、计算属性和方法。

7. 代码的简洁性与易用性：

React：
- React 使用 JSX 语法，在 JavaScript 和 HTML 之间做了较大的融合，可能对新手有一定的学习曲线，尤其是如何正确处理事件和状态更新。
Vue 3：
- Vue 3 提供了一个更直观和声明式的模板语法，setup 函数则可以组织和管理逻辑。Vue 3 在语法上比 React 更加简洁，对于初学者更友好。

总结

总结一下，我们发现，Vue的优势包括：

模板和渲染函数的弹性选择
简单的语法及项目创建
更快的渲染速度和更小的体积

React的优势包括：

更适用于大型应用和更好的可测试性
同时适用于Web端和原生App
更大的生态圈带来的更多支持和工具

嗯。。。。。。我咋感觉react更简单嘞，可是是我现在还在入门，不知道各位大佬选择的是啥？