Categories
程式開發

從React切換到Vue.js


React 和 Vue 的關係有點像可口可樂和百事可樂,你在 React 中做的很多事情都可以在 Vue 中完成。當然這裡也存在一些重要的概念差異,其中一些反映了 Angular 對 Vue 的影響。

我將在本文中重點介紹兩者的差異部分,幫助你快速入門 Vue 並立刻提高生產力。

React 和 Vue 之間有多少區別?

React 和 Vue 的相似之處比它們的差異更多:

  • 兩者都是用於創建 UI 的 JavaScript 庫。
  • 它們都快速而輕巧。
  • 兩者都具有基於組件的架構。
  • 兩者都使用一個虛擬 DOM。
  • 兩者都可以放入單個 HTML 文件中,也可以用作更複雜的 Webpack 設置中的一個模塊。
  • 兩者都有獨立的,但常用的路由和狀態管理庫。

它們最大的區別是 Vue 通常使用一個 HTML 模板文件,而 React 完全使用 JavaScript。 Vue 還具有 可變的狀態,以及用於重新渲染的一套自動化系統,稱為“反應性”。

下面我們一點點來分析。

組件

在 Vue.js 中可以使用 API方法.component 聲明組件,該方法接受一個 id 和一個定義對像這兩個參數。你可能會注意到 Vue 組件有很多眼熟的部分,還有一些陌生的部分:

Vue.component('my-component', {
  // Props
  props: [ 'myprop' ],
  // Local state
  data() {
    return {
      firstName: 'John',
      lastName: 'Smith'
    }
  },
  // Computed property
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  // Template
  template: `
    

Vue components typically have string templates.

Here's some local state: {{ firstName }}

Here's a computed value: {{ fullName }}

Here's a prop passed down from the parent: {{ myprop }}

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

模板

你會注意到該組件具有一個 template 屬性,該屬性是 HTML 標記的一個字符串。 Vue 庫包含一個編譯器,該編譯器在運行時將一個模板字符串轉換為一個 render 函數。這些渲染函數由虛擬 DOM 使用。

如果你想定義自己的 render 函數,則可以選擇 不使用 模板。你甚至可以使用 JSX。但切換到 Vue 上還要這樣做的話,就好像是去意大利旅遊卻不吃披薩一樣……

生命週期 Hooks

Vue 中的組件也有與 React 組件類似的生命週期方法。例如,當組件狀態就緒,而組件還沒有掛載到頁面之前,將觸發 created 這個 hook。

這裡兩者的一大區別是:React 中的 shouldComponentUpdate 在 Vue 裡沒有等效存在。由於 Vue 是有反應系統的,所以這裡不需要它。

重渲染

Vue 的一個初始化步驟是遍歷所有數據屬性並將它們轉換為 getters 和 setters。看看下面的截圖,這裡顯示了 message 數據屬性是怎樣添加 get 和 set 函數的:

從React切換到Vue.js 1

Vue 添加了這些 getter 和 setter 後,就能在訪問或修改屬性時啟用依賴項跟踪和更改通知。

可變狀態

要更改 Vue 中組件的狀態,你不需要一個 setState 方法,只需進行突變即可:

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

當 message 的值因突變而更改時,將觸發其 setter。 set 方法將設置新值,此外還將執行第二項任務,告訴 Vue 某個值已更改,並且頁面中依賴該值的部分都可能需要重渲染。如果將 message 作為一個 prop 傳遞給任何子組件,則 Vue 就知道它們依賴這個 prop,並且它們也會自動重渲染。這就是為什麼在 Vue 組件上不需要 shouldComponentUpdate 方法的原因。

主模板

談到主模板文件,Vue 更像 Angular 一些。與 React 一樣,Vue 需要掛載在頁面中的某個位置:


  
// React ReactDOM.render('...', document.getElementById('root')); // Vue new Vue({ el: '#root' });

但是與 React 不同,你可以繼續添加到這個主 index.html 上,因為它是你的根組件的模板。

You can add more markup to index.html

還有一種方法是使用 x-template 或 inline-template 之類的 HTML 功能在 index.html 中定義子組件模板。但這並不是最佳實踐,因為它會將模板與其他組件定義區隔開來。

指令

同樣,與 Angular 一樣,Vue 允許你通過“指令”使用邏輯增強模板。這些指令是帶有 v- 前綴的特殊 HTML 屬性,例如 v-if 用於條件渲染,v-bind 將一個表達式綁定到一個常規 HTML 屬性上。

new Vue({
  el: '#app',
  data: {
    mybool: true,
    myval: 'Hello World'
  }
});
This renders if mybool is truthy.

分配給指令的值是一個 JavaScript 表達式,因此你可以引用數據屬性,包括三元運算符等。

工作流

儘管有社區構建的 create-vue-app,但 Vue 沒有正式的 create-react-app 等效選項。

官方對啟動項目的推薦是 vue-cli。它可以生成任何內容,從帶有一個 HTML 文件的簡單項目到完全打包的 Webpack + 服務端渲染項目皆可:

$ vue init template-name project-name

單 HTML 文件項目

Vue 的創建者 Evan You 將他做的這個項目稱為一種“漸進式框架”,因為它可以針對複雜的應用向上擴展,也可以針對簡單的應用向下縮放。

當然 React 也可以做到這一點。區別在於,Vue 項目通常使用較少的 ES6 特性,且很少使用 JSX,因此通常無需添加 Babel。另外,Vue 庫全部都放在一個文件中,沒有對應於 ReactDOM 的單獨文件。

將 Vue 添加到單 HTML 文件項目中的方法如下:


注意:如果你不打算使用模板字符串,也就是說不需要模板編譯器的話,就可以使用一個較小的 Vue 版本,稱為 vue.runtime.js。它的大小約為 20KB。

單文件組件

如果你樂意使用 Webpack 之類的工具向項目中添加構建步驟,則可以利用 Vue 的單文件組件(SFC)。這些文件具有.vue 擴展名,並將組件模板、JavaScript 配置和样式封裝在一個文件中:


  
{{ message }}
export default { data() { message: 'Hello World' } } .my-class { font-weight: bold; }

毫無疑問,這是 Vue 的最酷特性之一,因為你獲得了一個帶有 HTML 標記的“適當”模板,但是也包含了 JavaScript,因此模板和邏輯之間沒有尷尬的分離。

有一個名為 vue-loader 的 Webpack 加載器,它負責處理 SFC。在構建過程中,模板將轉換為一個渲染函數,因此這是在瀏覽器中使用精簡的 vue.runtime.js 構建的完美用例。

Redux 和其他

Vue 還有一個基於 Flux 的狀態管理庫,稱為 Vuex。同樣,它與 Redux 類似,但也有很多區別。

我沒時間在這篇文章中講解,因此將在下週的文章中具體介紹相關內容。請關注我的更新:

http://vuejsdevelopers.com/newsletter/?jsdojo_id=dz_srv

原文鏈接

Switching From React to Vue.js