[[354278]]

在過去的 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 個部分的組件。

看起來像這樣： 

<template>  
  <p>{{ greeting }} World!</p>  
</template>  
<script>  
  module.exports = {  
    data() {  
      return {  
        greeting: 'Hello', 
       };  
    },  
  };  
</script>  
<style scoped>  
  p {  
    font-size: 2em;  
    text-align: center;  
  }  
</style> 

即便你不是一個 Vue.js 的工程師也可以理解這里的代碼。

React 組件提供了開箱即用的 UI 和 行為部分，但是樣式在很大程度上不受限制： 

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

當然了，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 模板： 

<div  
  class="static"  
  :class="{ active: isActive, 'text-danger': hasError }"  
></div> 

data 內容： 

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

渲染出的 UI： 

<div class="static active"></div> 

有這個內置項真好。

Vue.js 進一步支持內聯樣式。Vue.js 和 React 一樣，都支持內聯樣式，但是 Vue.js 比 React 更棒的地方就是它能夠自動為需要的 CSS 加上前綴。

參考文檔:

當使用 :style 時，需要添加瀏覽器引擎前綴的 CSS 屬性，拿 transform 舉例，Vue.js 會自動偵測并添加相應的前綴。

真正顯示框架控制自己的模板語法的優勢。

6、插槽

React 中一切都是 prop。

如果要在 React 組件中渲染多個子節點，只需添加多個 prop： 

function Nav({ left, right }) {  
  return (  
    <nav>  
      <div className="left">{left}</div>  
      <div className="right">{right}</div>  
    </nav>  
  );  
}  
function App() { 
   return (  
    <main> 
       <Nav left={<Logo />} right={<UserDropdown />} />  
    </main> 
   );  
} 

但如果內部內容邊龐大之后，雖然能很好運行，但有一點尷尬。

Vue.js 采用了插槽的方法，我認為它的 API 更簡潔。 

<!-- A Vue.js component template named "base-layout" -->  
<div class="container">  
  <header>  
    <slot name="header"></slot>  
  </header>  
  <main>  
    <slot></slot>  
  </main>  
  <footer>  
    <slot name="footer"></slot>  
  </footer>  
</div> 
<!-- When "base-layout" is used -->  
<base-layout>  
  <template v-slot:header>  
    <h1>Here might be a page title</h1>  
  </template> 
  <template v-slot:default>  
    <p>A paragraph for the main content.</p> 
     <p>And another one.</p>  
  </template>  
  <template v-slot:footer>  
    <p>Here's some contact info</p>  
  </template>  
</base-layout> 

Vue.js 使用插槽（受Web Component 規則草案的啟發）清楚地指明內容在組件內部的位置。

Vue.js 為反復執行的任務提供了捷徑。在這種情況下，可以使用插槽來簡化上面的示例： 

<base-layout>  
  <template #header>  
    <h1>Here might be a page title</h1>  
  </template>  
  <template #default>  
    <p>A paragraph for the main content.</p>  
    <p>And another one.</p>  
  </template>  
  <template #footer>  
    <p>Here's some contact info</p>  
  </template>  
</base-layout> 

7、指令修飾符

我認為 Vue.js 指令修飾符的功能真的很酷。

在討論指令修飾符之前，讓我快速介紹一下指令是什么。

指令 v- 是你在 Vue.js 模板中使用的“帶有前綴的特殊屬性”。

指令的作用是在表達式的值發生變化時以響應地方式將副作用施加到 DOM

例如: 

// If "seen" variable is false then this p tag is not rendered  
<p v-if="seen">Now you see me</p> 

針對事件地指令： 

<!-- full syntax -->  
<a v-on:click="doSomething"> ... </a>  
<!-- shorthand -->  
<a @click="doSomething"> ... </a> 

還有其他更多的指令。

指令還支持修飾符。

使用通用指令執行通用操作很開發友好。

對于事件處理指令（v-on），有很多修飾符： 

<!-- the click event's propagation will be stopped -->  
<a @click.stop="doThis"></a>  
<!-- the submit event will no longer reload the page -->  
<form @submit.prevent="onSubmit"></form>  
<!-- modifiers can be chained -->  
<a @click.stop.prevent="doThat"></a>  
<!-- just the modifier --> 
<form @submit.prevent></form>  
...and more! 

如果你想在 React 中執行這樣的操作，可以創建一個輔助函數或一個自定義組件。但與指令修飾符地方式相比并不簡潔。

我很好奇是否有人可以開發一個 Babel JSX 超集，然后就可以編寫如下代碼了：

<form onSubmit.prevent={onSubmit} /> 

它將轉換為： 

React.createElement(form, { onSubmit: preventWrapper(onSubmit) }); 

這不在 React 的討論范圍內，但我仍然認為這會是一次生產效率地大提升。

還有更多的 Vue.js 修飾符。比如按鍵修飾符： 

<!-- only call `submit()` when the `key` is `Enter` -->  
<input @keyup.enter="submit" />  
<input @keyup.page-down="onPageDown" /> 

太酷了。

8、表單輸入綁定

當將數據綁定到輸入元素時，v-model 指令會有非常有趣的特性。

從文檔中發現，v-model 內部使用了不同的屬性，并為不同的輸入元素發出不同的事件:

•  text 和 textarea 元素使用 value 屬性和 input 事件；
•  復選框和單選按鈕使用 checked 屬性和 change 事件；
•  select 使用 value 用作屬性和 change事件。

這樣做的好處是，您無需關心數據是如何同步的，您只需關心它是如何為你服務的。

讓我們比較一下 React 和 Vue.js 是如何進行綁定： 

// Input  
////////  
// React  
<input type="input" value={message} onChange={onChange} />  
// Vue.js  
<input type="input" v-model="message" />  
// Checkboxes and Radiobuttons  
////////  
// React  
<input type="checkbox" checked={message != null} onChange={onChange} />  
// Vue.js  
<input type="checkbox" v-model="message" />  
// Select 
////////  
// React  
<select value={message} onChange={onChange}>  
    <option>A</option>  
</select>  
// Vue.js  
<select v-model="message">  
    <option>A</option>  
</select> 

發現其中的不同了嗎？

現在，我要為 React 辯護了，React 鼓勵（并要求）您學習學習數據實際是如何設置以及它是如何變化的。這意味著，如果您曾經用普通 JS 寫過一個表單，您將更了解其運行原理。 與 Vue.js 不同，后者幫您把這些特性都抽象出來了。

9、自定義指令

像任何好的框架一樣，您可以在 Vue.js 中創建自己的自定義指令。

Vue.js 確實關注“代碼重用和抽象的主要形式是組件”，但這里有一個使用自定義指令不錯的例子，通過v-focus在 mount 時自動聚焦到元素上： 

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()  
  }  
})  
<input v-focus /> 

在 React 中，你可能會編寫一個自定義組件來完成相同的事情，但對于這種簡單任務而言有些重

10、用 TypeScript 編寫

最后，Vue.js 最近正在用 TypeScript 重寫。

這意味著它們對 TypeScript 支持都是一流的，因為框架本身是就是用 TypeScript 編寫的。

其實 React 用什么編寫并不重要，我也不認為它有什么太大的區別，但看到 Vue.js 也用 TypeScript 編寫仍然是一件很不錯事。

總結

我是要放棄 React 并開始專門使用 Vue.js 嗎？不，我仍然非常喜歡作為“庫”的 React 并且坦率地講，我已經很精通編寫 React 程序了。

但是，我很希望看到 React 能從 Vue.js 中汲取一些靈感并整合到其中，如果只能從本文中提到的幾個點中選擇一個，我絕對選風格指南。我很期盼能看到 React 有一個官方支持和維護的風格指南。

希望我能讓你看到一些你不知道 Vue.js！我很確信自己真的很喜歡 Vue.js 的哲學！