1.4.2　Vue.js與React的比較

Vue.js和React兩個JavaScript框架都是當下比較受歡迎的。兩者之間的區(qū)別主要有哪些？各自的優(yōu)缺點是什么呢？下面將針對這兩個問題進行介紹。

1．Vue.js與React相比的優(yōu)勢

（1）使用虛擬DOM。

（2）提供了響應式和組件化的視圖組件。

（3）關(guān)注核心庫，有配套的路由和負責處理全局狀態(tài)管理的庫。

2．Vue.js與React的區(qū)別

1）在性能方面Vue.js與React的區(qū)別

（1）渲染性能。渲染用戶界面的時候，DOM的操作成本是最高的。那為了盡可能地減少對DOM的操作，Vue.js和React都利用虛擬DOM來實現(xiàn)這一點，但Vue.js的虛擬DOM實現(xiàn)的權(quán)重要輕得多，因此比React的引入開銷更少。Vue.js和React也提供功能性組件，這些組件由于都是沒有聲明、沒有實例化的，因此會花費更少的開銷。當這些都用于關(guān)鍵性能的場景時，Vue.js將會更快。

（2）開發(fā)中性能。在開發(fā)中，Vue.js每秒最高處理10幀，而React每秒最高處理不到1幀。這是由于React有大量的檢查機制，這會讓它提供許多有用的警報和錯誤提示信息。Vue.js在實現(xiàn)這些檢查時，也更加密切地關(guān)注了性能方面。

（3）更新性能。在React中，當一個組件的狀態(tài)發(fā)生變化時，它將會引起整個組件的子樹都進行重新渲染，從這個組件的根部開始。為了避免子組件不必要的重新渲染，需要隨時使用shouldComponentUpdate，并使用不可變的數(shù)據(jù)結(jié)構(gòu)。在Vue.js中，組件的依賴關(guān)系在渲染期間被自動跟蹤，因此系統(tǒng)能夠準確地知道哪些組件實際上需要重新渲染。這就意味著在更新方面，Vue.js也是快于React的。

2）在HTML及CSS方面Vue.js與React的區(qū)別

在React中，HTML和CSS都是通過JavaScript編寫的，所有組件的渲染都需要依靠JSX。JSX是使用XML語法編寫JavaScript的一種語法。

JSX的渲染功能有以下優(yōu)勢。

（1）可以使用完整的編程語言JavaScript來實現(xiàn)視圖界面。

（2）工具對JSX的支持相比于現(xiàn)有可用的其他Vue.js模板還是比較先進的（例如，代碼校驗（Linting）、類型檢查、編輯器的自動完成等）。

在Vue.js中，有時需要用這些功能，當然也提供了渲染功能且支持JSX。然而，對于大多數(shù)組件來說，是不推薦使用渲染功能的。

Vue.js提供的是在HTML中編寫模板，其優(yōu)點如下。

（1）在編寫模板的過程中，樣式風格已定，并涉及更少的功能實現(xiàn)。

（2）模板總是會被聲明的。

（3）模板中任何HTML語法都是有效的。

CSS的組件作用域：需要將組件分布在多個文件上（例如CSS Modules），否則在React中作用域內(nèi)的CSS就會產(chǎn)生警報。非常簡單的CSS還可以工作，但是稍微復雜點的（例如懸停狀態(tài)、媒體查詢、偽類選擇符等）或者通過復雜的依賴來重做，或者直接不能使用。而Vue.js可以在每個單文件組件中完全訪問CSS，代碼如下。

上述代碼中的可選scoped屬性會自動添加一個唯一的屬性（例如data-v-time）為組件內(nèi)CSS所指定的作用域，在執(zhí)行編譯時.list-container:hover會被程序編譯成類似.list-container[data-v-time]:hover的形式。

3）在擴展方面Vue.js與React的區(qū)別

（1）向上擴展。

①Vue.js的路由庫和狀態(tài)管理庫都是由官方維護支持且與核心庫同步更新的。React則是選擇將路由庫和狀態(tài)管理庫這些問題交給社區(qū)維護，因此創(chuàng)建了一個更分散的生態(tài)系統(tǒng)。但React的生態(tài)系統(tǒng)相比Vue.js更加多樣化。

②Vue.js提供了Vue-cli腳手架，能讓開發(fā)者非常容易地構(gòu)建項目，包含了Webpack、Browserify，甚至No Build System。React在這方面提供了create-react-app，但可能還存在一些局限性。

·　不允許在項目生成時進行任何配置，而Vue.js支持Yeoman-like定制。

·　只提供一個構(gòu)建單頁面應用的單一模板，而Vue.js提供了各種用途的模板。

·　不能以用戶自建的模板構(gòu)建項目，而自建模板對企業(yè)環(huán)境下預先建立協(xié)議是特別有用的。

（2）向下擴展。

學習React需要了解JSX和ES 2015。而Vue.js使用相對比較簡單，只需要引用以下語句就可以使用了，開發(fā)環(huán)境時將其替換成min版的即可。

    <script src="https://unpkg.com/vue/dist/vue.js"></script>