👩🏾‍🤝‍👨🏽 👇🏼 📒 前端开发人员何时应从React切换到Vue，以及何时使开发复杂化 👨🏻‍💼 👰🏽 👨🏼‍🎤

如果您试图找出这两个伟大的框架中的哪个，请阅读Vue支持者关于此问题的观点，我对此进行了翻译和补充。

在Mail.ru云解决方案云平台的支持下进行了翻译。

因此，您是React开发人员，因此决定尝试Vue。开始吧！

React和Vue都是可口可乐和百事可乐。使用React可以做的大部分事情也可以通过Vue完成。同时，存在一些差异，其中一些反映了Angular框架对Vue的影响。

本文着重于差异，因此您将立即进入Vue的世界，并了解其好处。

React和Vue有多少不同？

React和Vue的相似之处多于差异：

这是两个用于创建UI的库。
既快又轻；
具有面向组件的架构；
使用虚拟DOM方法；
两者都可以直接在HTML文件中连接，也可以作为Webpack上更复杂的构建系统中的模块连接；
两者都有单独但广泛使用的第三方库，用于路由和状态管理。

明显的区别是Vue通常使用HTML模板文件，而React仅使用JavaScript文件。Vue库还具有可变状态和称为反应性的自动模板重绘系统。

组件

在Vue库中，使用API方法连接组件，该方法.component采用id参数和带有定义变量的对象。React开发人员可能会注意到在此代码中定义Vue组件的熟悉和不熟悉的方面：

Vue.component('my-component', {
  //<strong> </strong> Props
  props: [ 'myprop' ],
  // <strong> </strong> Local state
  data() {
    return {
      firstName: 'John',
      lastName: 'Smith'
    }
  },
  // <strong>  </strong>Computed property
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  // <strong> </strong>Template
  template: `
    <div>
      <p>Vue components typically have string templates.
      <p>Here's some local state: {{ firstName }}
      <p>Here's a computed value: {{ fullName }}
      <p>Here's a prop passed down from the parent: {{ myprop }}
    </div>
  `,

  // <strong>    </strong>Lifecycle hook
  created() {
    setTimeout(() => {
      this.message = 'Goodbye World' 
    }, 2000);
  }
});

模板

如您所见，该组件具有一个property template，它是带有HTML标记的字符串。Vue库包含一个编译器，该编译器在运行时将此字符串转换为渲染函数。这些渲染功能使用虚拟DOM引擎。如果您决定创建自己的渲染功能，

则不能使用该属性template。您甚至可以使用React世界中的JSX标记。但是切换到Vue并以这种方式进行操作会很奇怪-如何来到意大利拒绝比萨饼...

生命周期挂钩

Vue组件具有类似于React组件的生命周期方法。例如，上例中的挂钩在组件created的状态（state）就绪时开始，但在组件附加到页面之前开始。来自世界的反应- getDerivedStateFromProps。

但是有一个很大的区别：在Vue库中没有React库的类似物shouldComponentUpdate。由于Vue反应系统，这不是必需的。

重绘元件

初始化组件的步骤之一是查看其所有属性，并将它们转换为getter和setter。如您所见，message从原始数据（props）中获取的属性收到了另外两个方法- get和set：

Vue附加了这些功能，以在程序读取或更改依赖项时启用依赖项跟踪和属性更改通知。

可变状态

要在Vue中更改状态，您不需要this.setState像React中那样调用单独的方法。您只需直接写更改：

// React
this.setState({ message: 'Hello World' });
// Vue
this.message = 'Hello World';

当状态值以此方式更改时，将启动set该值的方法（请参见上文）。Set编写一个新值，但他还有另一项任务：他通知库此值已更改，并且取决于状态中此变量值的那部分布局可能需要重绘。

如果将变量message作为属性（prop）进一步抛出到子组件中，则库将记住这一点，并且子组件也将自动重绘。这就是Vue库不需要类似于React的生命周期方法的原因shouldComponentUpdate。

主模板

关于主项目模板文件，Vue更像Angular。像在React中一样，Vue模板需要安装在页面上的某个位置：

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

// React
ReactDOM.render('...', document.getElementById('root'));

// Vue
new Vue({
  el: '#root'
});

但是，与React不同，您可以向此根元素添加常规布局。如果在安装组件时React擦除了元素内部的所有内容#root，则Vue将保存：

<div id="root">
  <div>You can add more markup to index.html</div>
  <my-component v-bind:myprop="myval"></my-component>
</div>

还有一种方法可以通过HTML5扩展名（例如x-template或inline-template）在根html文件中定义子组件的模板。这不是最佳做法，因为它会将模板与整个组件的定义分开。

指令

同样，与Angular中一样，Vue允许您使用“指令”的逻辑来扩展组件的功能。有一些带有前缀的特殊HTML属性v-，例如，v-if用于带条件渲染或v-bind将表达式附加到常规HTML属性：

new Vue({
  el: '#app',
  data: {
    mybool: true,
    myval: 'Hello World'
  }
});
<div id="app">
  <div v-if="mybool">This renders if mybool is truthy.</div>
  <my-component v-bind:myprop="myval"></my-component>
</div>

分配给指令的值是一个JS表达式，因此您可以引用数据属性，包括使用三元运算符，等等。

项目组织

Vue库中没有对应于react-create-app的官方等效项，但是Vue开发人员社区构建了一个版本：create-vue-app。

在Vue上启动项目的官方建议是vue-cli。它可以生成所有内容，从一个带有一个HTML文件的简单项目到一个完全打包的Webpack +服务器端渲染项目：

$ vue init template-name project-name

具有单个HTML文件的项目

Vue.js的创建者Ewan Yu（You Yu Xi）称他的项目为“渐进框架”，因为它可以针对复杂的应用程序进行缩放，而对于小型应用程序可以进行简化。

当然，React也可以做到这一点。不同之处在于，Vue项目通常使用较少的ES6功能，而很少使用JSX，因此它们不需要使用Babel转置代码。另外，整个Vue库只适合一个文件，没有用于React等价物（如ReactDOM）的单独文件。

以下是使用单个HTML文件将Vue添加到项目中的方法：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

重要！如果您不打算使用模板字符串，因此不需要模板编译器，请使用不具有这些功能的库的简化版本-vue.runtime.js。它大约比完整的少20 KB。

一个文件中的组件

如果您有幸使用Webpack之类的工具添加项目的构建阶段，则可以使用Vue的单一文件组件（SFC，单个文件中的Vue组件）。这些是带有扩展名的文件.vue，它们将组件模板，JS配置和样式封装在一个文件中：

<template>
  <div class="my-class">{{ message }}</div>
</template>
<script>
  export default {
    data() {
      message: 'Hello World'
    }
  }
</script>
<style>
  .my-class { font-weight: bold; }
</style>

毫无疑问，这是Vue库最显着的功能之一，因为您获得了正确的HTML模板，但是JS逻辑就在其旁边，并且在表示和逻辑上没有分离曲线。

有一个称为vue-loader的Webpack-loader，它负责构建SFC。在组装过程中，模板将转换为渲染功能，这对于在浏览器中使用精简后的组装vue.runtime.js是理想的选择。

Redux和其他

Vue有一个基于Flux的状态管理库，称为Vuex。这次它类似于Redux，但是有一些区别。

从React切换到Vue时，开发人员会得到什么？

为了完全理解该问题，我对文章进行了补充，并告诉您什么时候选择React更好，什么时候选择Vue。

切换到Vue可能会使新人更容易进入项目。 Vue模板可以直接用HTML编写。此外，对于小型项目，也无需了解最新的ES ++功能并通过Webpack和Babel等工具配置代码汇编。 Vue的代码可以用jQuery风格编写，即直接写到模板中。

Vue还具有便捷的现成状态消息传递系统。开发人员无需费心调用异步方法setState（如React）或连接外部库来控制状态传递（例如Mobx）。

最后，使用Vue编写的应用程序明显更轻：通常只需要库本身，甚至是精简的vue.runtime.js版本。如果没有Babel和笨重的捆绑包重达几兆字节，几乎不可能在React上进行现代开发。

另一方面，如果您的客户端上有大型应用程序或复杂逻辑，则Vue项目可能会太复杂。如果在HTML模板中完成布局，则测试应用程序的各个部分将变得更加困难。仅使用JS代码的React提供了更多功能来重用和扩展代码。另外，如果您使用React编写，则可以在使用React-Native为设备编写应用程序时重用代码，而无需花费很多费用。Vue并非如此。

因此，结论可能如下：

, , . ;
, : Vue, - React.

Mail.ru Cloud Solutions.

前端开发人员何时应从React切换到Vue，以及何时使开发复杂化