1.如果習慣使用模板語言構建應用程序,Vue更爲適合。
將標記放在HTML文件中是Vue應用程序的默認選項。與Angular類似,大括號用於數據綁定表達式,指令(特殊的HTML屬性)用於向模板添加功能。一個典型的Vue模板例子如下:
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
}
}
});
而React應用程序避開模板,要求開放人員在JavaScript中創建DOM,通常用JSX輔助,下面是用React來實現同樣的功能:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
message: 'Hello React.js!'
};
}
reverseMessage() {
this.setState({
message: this.state.message.split('').reverse().join('')
});
}
render() {
return (
<div>
<p>{this.state.message}</p>
<button onClick={() => this.reverseMessage()}>
Reverse Message
</button>
</div>
)
}
}
ReactDOM.render(App, document.getElementById('app'));
2.如果喜歡簡單的能正常工作的,請選擇Vue
一個簡單的Vue項目可以不需要解析,直接在瀏覽器中運行,這允許Vue可以像jQuery一樣在項目中引用。
典型的React代碼更傾向於像classes和non-mulating 數組方法這樣的JSX和ES6的特性。但是Vue在簡潔設計方面更爲深入。我們來比較兩者如何處理應用程序的數據(即“狀態”)。
在React中State是不可以直接改變的,需要調用setState接口:
this.setState({
message: this.state.message.split('').reverse().join('')
});
當前和之前的狀態差異讓React知道什麼時候在DOM中重新渲染以及渲染什麼,因此不可變的狀態是非常必要的。
相比之下,數據可以在Vue中突變。相同的數據屬性在Vue中發生變化更爲簡單。
// Note that data properties are available as properties of
// the Vue instance
this.message = this.message.split('').reverse().join('');
在你得出Vue渲染系統比React渲染低效的結論之前,讓我們來看看Vue中的狀態管理:當你向狀態添加新對象時,Vue會遍歷它的所有屬性並且轉換爲getter和setter。Vue系統會持續追蹤狀態並且在狀態發生變化時,自動重新渲染DOM。
令人印象深刻的是,Vue中的狀態改變更爲簡潔的同時,重新渲染系統的效率其實比React更好。
Vue的反應系統確實有值得注意的事項。例如:它不能檢測到屬性的添加、刪除以及特定數組的變化。在這種情況下,可以使用Vue API中類似React的set方法。
3.如果要構建大型應用程序,更適合React
用Vue和React來實現簡單的應用程序,就像本文開頭所說的一樣,大部分開發者會偏向於Vue。這是因爲基於模板的應用程序乍看更容易理解,並且能夠更快啓動。
但是這些初始的好處會導致大型程序進展緩慢。模板很容易出現運行時錯誤,難以測試,也不容易重構或分解。
相比之下,JavaScript製作的模板可以被組織成可分解的組件,DRY code也更容易重用和測試。
Vue也具有組件系統和渲染功能。但是React的渲染系統配置性更高,並且具有淺渲染的特性,與React的測試程序結合時,可以提供更多可測試和可維護的代碼。
4.如果要同時適用於Web和原生APP的庫,更適合React
React Native是用JavaScript創建原生APP的庫。它與React相同,只是將web組件換成了原生組件。如果你學習了React.js,那麼你很快就可以學會React Native,反之亦然。
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class HelloWorld extends Component {
render() {
return (
<View>
<Text>Hello, React Native!</Text>
</View>
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
重要的是,開發人員可以構建一個web或者原生APP,他們不需要不同的知識體系和工具。如果您打算開發web和移動APP,React會給你帶來巨大沖擊。
阿里巴巴的Weex是另一個跨平臺UI項目。目前,它認爲Vue提供了靈感,並且使用了很多相同的語法,並計劃完全集成Vue。但是,這個計劃的時間表和細節尚未清晰。
由於Vue將HTML模板作爲其設計的核心部分,也沒有將客戶端渲染作爲當前的特性,因此很難看到原生的Vue像React.js或React Native一樣緊密。
5.如果想要最大的生態系統,更適合React
React目前是最受歡迎的庫,NPM下載量每月約2.5M,Vue每月的下載量爲225k。
這意味有更多的文章、教程和Stack Overflow回答能夠幫助。也意味着在項目中有更多的工具和附加組件可用,同時節省了開發人員自己構建所有模塊的時間。
重點:如果你已經選擇了其中的一個,那麼也不需要換了
總結:
Vue的優勢是:
-
模板或渲染的靈活選項
-
語法以及項目設置的簡單
-
渲染速度更快,體積更小
React的優勢是:
-
更大的規模、更多的使用者、更好的可測試性
-
Web和原生APP
-
能提供更多支持和工具的更大的生態系統
React和Vue都是優秀的UI庫,並且具有更多的相似之處。
它們都有的優勢是:
-
使用虛擬DOM快速渲染
-
輕量級
-
響應式組件
-
服務端渲染
-
輕鬆集成的的路由、捆綁和狀態管理
-
強大的支持和社區