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() { returnthis.firstName +' '+this.lastName; } }, //Template template: ` <div> <p>Vue components typically have string templates.</p> <p>Here's some local state: {{ firstName }}</p> <p>Here's a computed value: {{ fullName }}</p> <p>Here's a prop passed down from the parent: {{ myprop }}</p> </div> `, //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 函數的：
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 需要掛載在頁面中的某個位置：
<body>
<divid="root"></div> </body> // React ReactDOM.render('...',document.getElementById('root')); // Vue newVue({ el:'#root' }); 但是與 React 不同，你可以繼續添加到這個主 index.html 上，因為它是你的根組件的模板。
<divid="root"> <div>You can add more markuptoindex.html</div> <my-component v-bind:myprop="myval"></my-component> </div> 還有一種方法是使用 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' } }); <divid="app"> <divv-if="mybool">This rendersifmyboolistruthy.</div> <my-component v-bind:myprop="myval"></my-component> </div> 分配給指令的值是一個 JavaScript 表達式，因此你可以引用數據屬性，包括三元運算符等。
工作流
盡管有社區構建的 create-vue-app，但 Vue 沒有正式的 create-react-app 等效選項。
官方對啟動項目的推薦是 vue-cli。它可以生成任何內容，從帶有一個 HTML 文件的簡單項目到完全打包的 webpack + 服務端渲染項目皆可：
$ vue inittemplate-nameproject-name
單 HTML 文件項目
Vue 的創建者 Evan You 將他做的這個項目稱為一種“漸進式框架”，因為它可以針對復雜的應用向上擴展，也可以針對簡單的應用向下縮放。
當然 React 也可以做到這一點。區別在於，Vue 項目通常使用較少的 ES6 特性，且很少使用 JSX，因此通常無需添加 Babel。另外，Vue 庫全部都放在一個文件中，沒有對應於 ReactDOM 的單獨文件。
將 Vue 添加到單 HTML 文件項目中的方法如下：
<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script> 注意：如果你不打算使用模板字符串，也就是說不需要模板編譯器的話，就可以使用一個較小的 Vue 版本，稱為 vue.runtime.js。它的大小約為 20KB。
vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com
單文件組件
如果你樂意使用 Webpack 之類的工具向項目中添加構建步驟，則可以利用 Vue 的單文件組件（SFC）。這些文件具有.vue 擴展名，並將組件模板、JavaScript 配置和樣式封裝在一個文件中：
<template> <div>{{ message }}</div> </template> <script> exportdefault{ data() { message:'Hello World' } } </script> <style> .my-class{font-weight: bold; } </style> 毫無疑問，這是 Vue 的最酷特性之一，因為你獲得了一個帶有 HTML 標記的“適當”模板，但是也包含了 JavaScript，因此模板和邏輯之間沒有尷尬的分離。
有一個名為 vue-loader 的 Webpack 加載器，它負責處理 SFC。在構建過程中，模板將轉換為一個渲染函數，因此這是在瀏覽器中使用精簡的 vue.runtime.js 構建的完美用例。
Redux 和其他
Vue 還有一個基於 Flux 的狀態管理庫，稱為 Vuex。同樣，它與 Redux 類似，但也有很多區別。