vue 和react 到底谁更好：新手小白必看的vue基础和react基础

Asuka805
212 阅读6分钟

引言

如今AI越来越发达，学习vue还是react或许并没那么重要了，使用AI Coding 让我们只需了解vue 和react基础就能做出很棒的Web 页面，所以对于选择vue 还是react 这个问题，我的答案是一起搞。接下来让小编带你了解这两者的基础知识。

Vue

引入Vue

在HTML文件的<head>标签中添加如下代码行，以确保DOM加载完成后再初始化Vue实例。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.9/vue.global.js"></script>

这种方式是通过CDN引入Vue.js。

接下来，在你的HTML文档中创建一个容器元素（例如，<div>），然后在这个元素内部编写你想要与Vue交互的内容。之后，你需要创建一个新的Vue实例，并将这个实例挂载到刚刚创建的容器元素上。

Vue 的响应式系统

提到Vue，不得不聊的就是它的响应式系统，它能够让数据变化的同时，使得界面也同时变化。

首先，将前端工作交给vue,在HTML需要一个挂载点 #root

<div id="root"></div>

此时Vue将会接管<div>中的元素，并根据实例中的数据属性来渲染内容。

<div id="root">
    <p>Counter: {{count}}</p>
    <button @click="increment">+1</button>
</div>
const {
    createApp, // 创建Vue应用
    ref // 声明响应式数据
  } = Vue

  createApp({
    // 准备应用需要的数据 
    setup() {
        let count = ref(0); // 响应式对象
        const increment = () => {
            count.value++;
        }
        return {
            count,
            increment
        }
    }
  }).mount('#root') // 挂载点

在这里，我们创建了一个简单的计数器应用。这个例子包含了一个显示count变量的段落元素和一个按钮，点击按钮时会触发increment方法来增加count的值。其中{{}} 是vue 的数据占位符，它里面的值是可以改变的。

在这段代码中，有几个关键点

  • Composition API：Vue 3引入了Composition API，它提供了一种更灵活的方式来组织和复用逻辑。setup()函数是Composition API的核心，所有在其中定义的响应式状态和方法都必须通过return语句暴露给模板。
  • ref：用于将普通JavaScript值（如数字、字符串等）转换为响应式对象。对于基本类型，你需要通过.value属性访问或修改其值。
  • setup()函数：这是Composition API的主要入口点，在这里你可以编写逻辑，定义响应式状态，并且还可以使用其他Composition API函数，如reactive、computed、watch等。
  • return语句：从setup()函数返回的对象将被合并到组件实例中，因此你可以直接在模板中使用这些返回的属性和方法。

react

引入react

React是一个JavaScript库，用于构建用户界面。它不是直接嵌入到HTML中的，而是通过JavaScript文件引入并渲染到页面上的一个特定DOM节点内。

与vue 类似，我们还是通过CDN来引入React和ReactDOM库。

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入 Babel 编译 JSX 使用 BootCDN -->
    <script src="./js/babel.min.js"></script>

接下来，在你的HTML文档中创建一个容器元素，React将在这个元素内部渲染内容。然后编写React组件，并将其挂载到这个容器元素上。

react 的响应式系统

   <div id="root"></div>
    <script type="text/babel">
    // 函数组件
    const {
        useState,
    } = React;
    function Counter() {
        const [count, setCount] = React.useState(0); // 数据状态
        // const count = 0;
        const increment = () => {
            setCount(count+1);
        }
        return (
            <div>
                Count: {count}
                <button onClick={increment}>+1</button>
            </div>
        )
    }
    ReactDOM.render(<Counter />, document.getElementById('root'))
    </script>

这里也是一个简单的计数器组件。

关键点解释：

  • 引入库：确保按照正确的顺序引入了React、ReactDOM和Babel。这些库可以通过CDN引入。
  • useState 钩子：useState是一个React Hook，允许你在函数组件中添加状态。这里我们定义了一个名为count的状态变量及其对应的更新函数setCount。
  • 状态更新的最佳实践：在更新状态时，推荐使用函数形式（如setCount(prevCount => prevCount + 1)），这样可以确保即使有多个状态更新同时发生，它们也能正确地按顺序执行。
  • JSX语法：注意，在<script>标签中使用type="text/babel"是为了让Babel能够识别并编译JSX语法。如果你不使用Babel，则需要避免使用JSX，并改用React.createElement等方法来构建元素。
  • 渲染组件：最后，使用ReactDOM.render方法将Counter组件渲染到具有ID为root的DOM节点中。

两者异同

Vue和React的两段代码展示了如何在这两个流行的前端框架/库中创建一个简单的计数器组件。尽管它们实现了相同的功能，但在语法、结构和理念上存在一些差异。让我们来比较这两段代码的异同。

相似点

1. 功能一致：

  • 两者都实现了一个简单的计数器逻辑，允许用户点击按钮增加计数值，并在页面上显示当前的计数。

2. DOM挂载：

  • Vue和React都需要一个DOM元素作为挂载点（例如，<div id="root"></div>），以将组件渲染到页面上。

3. 状态管理：

  • 两个例子都使用了状态（state）来跟踪计数器的值，并提供了更新状态的方法（increment函数）。

4. 事件处理：

  • 都通过监听按钮点击事件来触发状态更新。

5. 模板渲染：

  • 都在模板中使用了表达式或插值来动态显示状态变量（如count）。

不同点

1. 库引入与初始化

  • Vue：通过createApp函数创建应用实例，并显式地调用.mount()方法挂载到DOM节点。
  • React：通过ReactDOM.render方法直接将组件渲染到指定的DOM节点。

2. 组件定义方式

  • Vue：使用选项API或Composition API定义组件。在你提供的Vue代码中，使用了Composition API (setup函数) 来定义响应式状态和方法。
  • React：使用函数组件（Functional Components），结合Hooks（如useState）来管理状态和副作用。

3. 状态管理

  • Vue (Composition API) ：使用ref或reactive来创建响应式数据。状态更新通过直接修改.value属性完成。
  • React：使用useState Hook来声明状态变量。状态更新通过调用状态设置函数（如setCount），可以传递新值或更新函数。

4. 模板语法

  • Vue：使用双大括号{{ }}进行文本插值，并且支持指令（如v-bind、v-on）来进行属性绑定和事件监听。
  • React：使用JSX语法，它看起来像是XML/HTML，但实际上是一个JavaScript表达式。React组件返回的是JSX，而不是字符串模板。

5. 事件绑定

  • Vue：使用@click指令来绑定事件处理器。
  • React：直接在JSX中使用onClick属性来绑定事件处理器。

结语

Vue 和 React 各有优势，但在如今的就业环境下，或许双剑合璧才能更快的找到工作。

avatar
文章
阅读
粉丝