[[354278]]

在過去的 5 年中，我一直是一名 React 工程師。我愛 React，我愛開發(fā) React 應(yīng)用。我認(rèn)為它是現(xiàn)存最好的 UI 框架之一。

然而，React 在這個領(lǐng)域中有一些競爭對手，其中最大的就是 Vue.js。

我曾玩過一陣 Vue.js，但我認(rèn)為那時的經(jīng)驗已經(jīng)過時了。因為我將要深入研究 Vue.js 的工作原理以及了解它是如何讓我的工作變得更簡單。

在深入研究 Vue.js 文檔并使用之后（注意：我絕對不是 Vue.js 的專家），我驚奇地發(fā)現(xiàn)有些方面 Vue.js 甚至比 React 做得更好。

最后，我希望 React 能受到 Vue.js 的啟發(fā)并且也開始這么做。

1、不同的理念

Vue.js 和 React 之間的一個主要區(qū)別是它們對自己的定位不同。

從它們官網(wǎng)直觀來看，React 把自己描述為 “一個用于構(gòu)建用戶界面的 JavaScript 庫”，而 Vue.js 則把自己描述為“漸進式 JavaScript 框架”。

React 是一個庫，而 Vue.js 是一個框架。我認(rèn)為從很多方面來說，這是導(dǎo)致這些 UI 框架在執(zhí)行方式上有所不同的根本原因。

我想強調(diào)這一點，以便您在閱讀本文時隨時牢記這一點。 從歷史上看，庫和框架都專注于讓它們的工作表現(xiàn)得更出色，但框架的要求和提供的能力更全面詳盡，而庫則更少更輕量。

2、單文件組件

Vue 和 React 都有用來創(chuàng)建 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>  
  );  
} 

當(dāng)然了，React 有一個非?；钴S的社區(qū)，所以如果你想包含樣式，可以輕松使用 Emotion 或 Styled Components 來填補樣式的空缺，但是：

•  它們是非內(nèi)置的；
•  你必須知道這些庫才能使用他們。

這正好與默認(rèn)提供了這些的 Vue.js 相反。

3、官方支持的相關(guān)庫

任何足夠大且復(fù)雜的 UI 應(yīng)用都需要兩個附加功能的支持：

•  路由
•  狀態(tài)管理

Vue.js 官方支持的庫分別覆蓋了這兩個場景： Vue Router 和 Vuex 。

這些庫明確地在 Vue.js 文檔中提及，并且由 Vue.js 核心組開發(fā)和維護。這太神奇了。

它為剛使用 Vue.js 的工程師提供了解決問題的明確方法，并讓他們相信這些庫是長期維護的。

擁有第一方支持的庫并不會限制社區(qū)解決方案，但確實為新用戶提供了入門解決方案

4、風(fēng)格指南

嗯，我非常希望 React 也有風(fēng)格指南，在閱讀本節(jié)之前，請單擊鏈接并瀏覽Vue.js的樣式指南。

它回答了很多 Vue.js 新手可能遇到的問題，并提供了如何編寫 “適當(dāng)?shù)?rdquo; 和易于訪問的 Vue.js 的最佳實戰(zhàn)。

它分享了經(jīng)過實戰(zhàn)檢驗的以及社區(qū)中的最佳實踐和模式。

最重要的是：它是由 Vue.js 官方維護和支持的！這太棒了！

5、類和樣式綁定

如上所述，Vue.js 內(nèi)置了對樣式的支持。此外，Vue.js 本質(zhì)上是內(nèi)置 classNames 的。

Classnmes 是一個很棒的庫，可以方便地連接和動態(tài)構(gòu)造應(yīng)用于 HTML 元素的 CSS 類名。

而在 React 中，你需要知道這個庫，然后安裝它。

在 Vue.js 中，這只是另一個內(nèi)置特性：參考文檔:

Vue.js 模板： 

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

data 內(nèi)容： 

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

渲染出的 UI： 

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

有這個內(nèi)置項真好。

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

參考文檔:

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

真正顯示框架控制自己的模板語法的優(yōu)勢。

6、插槽

React 中一切都是 prop。

如果要在 React 組件中渲染多個子節(jié)點，只需添加多個 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> 
   );  
} 

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

Vue.js 采用了插槽的方法，我認(rèn)為它的 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 規(guī)則草案的啟發(fā)）清楚地指明內(nèi)容在組件內(nèi)部的位置。

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

<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、指令修飾符

我認(rèn)為 Vue.js 指令修飾符的功能真的很酷。

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

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

指令的作用是在表達式的值發(fā)生變化時以響應(yīng)地方式將副作用施加到 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> 

還有其他更多的指令。

指令還支持修飾符。

使用通用指令執(zhí)行通用操作很開發(fā)友好。

對于事件處理指令（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 中執(zhí)行這樣的操作，可以創(chuàng)建一個輔助函數(shù)或一個自定義組件。但與指令修飾符地方式相比并不簡潔。

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

<form onSubmit.prevent={onSubmit} /> 

它將轉(zhuǎn)換為： 

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

這不在 React 的討論范圍內(nèi)，但我仍然認(rèn)為這會是一次生產(chǎn)效率地大提升。

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

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

太酷了。

8、表單輸入綁定

當(dāng)將數(shù)據(jù)綁定到輸入元素時，v-model 指令會有非常有趣的特性。

從文檔中發(fā)現(xiàn)，v-model 內(nèi)部使用了不同的屬性，并為不同的輸入元素發(fā)出不同的事件:

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

這樣做的好處是，您無需關(guān)心數(shù)據(jù)是如何同步的，您只需關(guān)心它是如何為你服務(wù)的。

讓我們比較一下 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> 

發(fā)現(xiàn)其中的不同了嗎？

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

9、自定義指令

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

Vue.js 確實關(guān)注“代碼重用和抽象的主要形式是組件”，但這里有一個使用自定義指令不錯的例子，通過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 中，你可能會編寫一個自定義組件來完成相同的事情，但對于這種簡單任務(wù)而言有些重

10、用 TypeScript 編寫

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

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

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

總結(jié)

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

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

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