1.3 Vue與React

在MVVM框架一族中，Vue.js的表現(xiàn)十分優(yōu)秀。在1.3和1.4小節(jié)中，我們將分別看到Vue和React以及Vue和Angular的對比表現(xiàn)。

Vue和React都是輕量級框架，不過總體來看，Vue的性能是要高于React的，筆者簡單羅列了以下幾點。

1.3.1 虛擬DOM

在處理用戶界面時，DOM操作成本是最高的，兩者都在渲染流程中采用虛擬DOM以降低頁面開銷，如圖1.11所示。不過，Vue的虛擬DOM實現(xiàn)的層級更高一些，這也意味著Vue比React更輕量，性能更高一些。

1.3.2 功能性組件

兩者都提供一些功能性組件以減少用戶開銷。筆者運行GitHub上的一個測試項目（https://github.com/chrisvfritz/vue-render-performance-comparisons），該項目將渲染10000個列表條目100次，得到的測試結(jié)果如下，如表1.1所示。

React和Vue的速度都很快，不過顯然Vue的渲染速度要更快一些，這是因為React中有大量用于提供警告和錯誤提示信息的檢查機制。

1.3.3 輕量級——將與核心庫無關(guān)的業(yè)務(wù)封裝成獨立庫

React和Vue都將著重點放在核心庫上，也都有專門負(fù)責(zé)路由和全局狀態(tài)管理等功能的配套庫。例如，與React配套的有React Router、Redux，與Vue配套的有Vue Router、Vuex。

1.3.4 視圖模板

React采用JSX渲染組件，而Vue則采用模板，比如．vue后綴的文件。

JSX是使用XML語法編寫Javascript的一種語法糖。語法如下：

     class HelloMessage extends React.Component {
       render() {
         return (
            <div>
              Hello {this.props.name}
            </div>
         );
       }}
     
     ReactDOM.render(
       <HelloMessage name="Taylor" />,
       mountNode
     );

通過JSX，我們可以只用Javascript來構(gòu)建視圖組件。不過，對于從傳統(tǒng)HTML+ CSS+JS分離開發(fā)走向組件化開發(fā)的前端工程師來說，這種語法感覺并不友好。

Vue提供了更簡單的模板。語法如下：

     <template>
     <div class="demo-title">{{title}}</div>
     </template>
     
     <script>
       export default {
         data () {
            return {
              title: 'Hello World'
            }
         }
       }
     </script>
     
     <style scoped>
     .demo-title {
         font-size: 24px;
         font-weight: 600;
     }
     </style>

Vue模板更貼合HTML，而不是用更高層的東西去封裝它，學(xué)習(xí)曲線十分平緩。在Vue模板的style標(biāo)簽上標(biāo)注scoped屬性可劃分作用域，使CSS樣式表只作用于當(dāng)前組件（具體實現(xiàn)機制將在后續(xù)章節(jié)中描述）。

由于Vue模板更貼近原生，因此，我們很容易混入其他一些東西，比如HTML的預(yù)處理器（Pug/Jade等）、CSS的預(yù)處理器（LESS、SASS/SCSS等），以及更高版本（高級）的腳本語言（TypeScript、ES6 Javascript等）。Vue模板的語法也更符合傳統(tǒng)開發(fā)習(xí)慣，并易于團(tuán)隊分析和代碼維護(hù)。

1.3.5 其他

除框架本身外，Vue在其他方面也占據(jù)了一些優(yōu)勢，比如Vue的狀態(tài)管理庫vuex和路由庫vue-router都是由官方維護(hù)更新，從而保證了這些庫與Vue本身的統(tǒng)一性。而React的相關(guān)庫則由社區(qū)進(jìn)行維護(hù)，不過，這也使得React的社區(qū)生態(tài)更加繁榮一些。

此外，Vue提供了項目快速構(gòu)建工具——vue-cli腳手架，提供了包含npm依賴管理、webpack模塊打包、vue-router前端路由、eslint語法檢測、單元測試等集成功能，能夠讓開發(fā)者快速構(gòu)建一個高質(zhì)量的項目環(huán)境。