Vue和React的比较

这篇文章主要讲解了“Vue和React的比较”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue和React的比较”吧！

成都创新互联公司是一家专业提供张掖企业网站建设,专注与成都网站设计、网站建设、H5建站、小程序制作等业务。10年已为张掖众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

在过去的 5 年中，我一直是一名 React 工程师。我爱 React，我爱开发 React 应用。我认为它是现存最好的 UI 框架之一。

然而，React 在这个领域中有一些竞争对手，其中最大的就是 Vue.js。

我曾玩过一阵 Vue.js，但我认为那时的经验已经过时了。因为我将要深入研究 Vue.js 的工作原理以及了解它是如何让我的工作变得更简单。

在深入研究 Vue.js 文档并使用之后（注意：我绝对不是 Vue.js 的专家），我惊奇地发现有些方面 Vue.js 甚至比 React 做得更好。

最后，我希望 React 能受到 Vue.js 的启发并且也开始这么做。

1、不同的理念

Vue.js 和 React 之间的一个主要区别是它们对自己的定位不同。

从它们官网直观来看，React 把自己描述为 “一个用于构建用户界面的 JavaScript 库”，而 Vue.js 则把自己描述为“渐进式 JavaScript 框架”。

React 是一个库，而 Vue.js 是一个框架。我认为从很多方面来说，这是导致这些 UI 框架在执行方式上有所不同的根本原因。

我想强调这一点，以便您在阅读本文时随时牢记这一点。从历史上看，库和框架都专注于让它们的工作表现得更出色，但框架的要求和提供的能力更全面详尽，而库则更少更轻量。

2、单文件组件

Vue 和 React 都有用来创建 UI 的组件。

组件通常由 3 部分组成：

UI (HTML)
行为 (JavaScript)
外观 (CSS)

Vue.js 的理念是使用单文件组件，用一种开箱即用的方式来编写涵盖所有 3 个部分的组件。

看起来像这样：

        p {      font-size: 2em;      text-align: center;    }

即便你不是一个 Vue.js 的工程师也可以理解这里的代码。

React 组件提供了开箱即用的 UI 和行为部分，但是样式在很大程度上不受限制：

import React, { useState } from 'react';  function Button() {    const [count, setCount] = useState(0);    return (       setCount(count + 1)}>        Current count: {count}                Click me          );  }

当然了，React 有一个非常活跃的社区，所以如果你想包含样式，可以轻松使用 Emotion 或 Styled Components 来填补样式的空缺，但是：

它们是非内置的；
你必须知道这些库才能使用他们。

这正好与默认提供了这些的 Vue.js 相反。

3、官方支持的相关库

任何足够大且复杂的 UI 应用都需要两个附加功能的支持：

路由
状态管理

Vue.js 官方支持的库分别覆盖了这两个场景： Vue Router 和 Vuex 。

这些库明确地在 Vue.js 文档中提及，并且由 Vue.js 核心组开发和维护。这太神奇了。

它为刚使用 Vue.js 的工程师提供了解决问题的明确方法，并让他们相信这些库是长期维护的。

拥有第一方支持的库并不会限制社区解决方案，但确实为新用户提供了入门解决方案

4、风格指南

嗯，我非常希望 React 也有风格指南，在阅读本节之前，请单击链接并浏览Vue.js的样式指南。

它回答了很多 Vue.js 新手可能遇到的问题，并提供了如何编写 “适当的” 和易于访问的 Vue.js 的最佳实战。

它分享了经过实战检验的以及社区中的最佳实践和模式。

最重要的是：它是由 Vue.js 官方维护和支持的！这太棒了！

5、类和样式绑定

如上所述，Vue.js 内置了对样式的支持。此外，Vue.js 本质上是内置 classNames 的。

Classnmes 是一个很棒的库，可以方便地连接和动态构造应用于 HTML 元素的 CSS 类名。

而在 React 中，你需要知道这个库，然后安装它。

在 Vue.js 中，这只是另一个内置特性：参考文档:

Vue.js 模板：

data 内容：

data() {    return {      isActive: true,      hasError: false    }  }

渲染出的 UI：

有这个内置项真好。

Vue.js 进一步支持内联样式。Vue.js 和 React 一样，都支持内联样式，但是 Vue.js 比 React 更棒的地方就是它能够自动为需要的 CSS 加上前缀。

参考文档:

当使用 :style 时，需要添加浏览器引擎前缀的 CSS 属性，拿 transform 举例，Vue.js 会自动侦测并添加相应的前缀。

真正显示框架控制自己的模板语法的优势。

6、插槽

React 中一切都是 prop。

如果要在 React 组件中渲染多个子节点，只需添加多个 prop：

function Nav({ left, right }) {    return (              {left}

Here might be a page title

A paragraph for the main content.

And another one.

Here's some contact info

Here might be a page title

A paragraph for the main content.

And another one.

Here's some contact info

// Input //////// // React // Vue.js // Checkboxes and Radiobuttons //////// // React // Vue.js // Select //////// // React // Vue.js

const app = Vue.createApp({}) // Register a global custom directive called `v-focus` app.directive('focus', { // When the bound element is mounted into the DOM... mounted(el) { // Focus the element el.focus() } })

重庆分公司，新征程启航

Vue和React的比较

Here might be a page title

Here might be a page title

其他资讯