React && Vue

React 和 Vue 有許多相似之處，它們都有：

• 使用 Virtual DOM
• 提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件。
• 將注意力集中保持在核心庫，伴隨于此，有配套的路由和負(fù)責(zé)處理全局狀態(tài)管理的庫。
  

由于有著眾多的相似處，我們會用更多的時(shí)間在這一塊進(jìn)行比較。這里我們不只保證技術(shù)內(nèi)容的準(zhǔn)確性，同時(shí)也兼顧了平衡的考量。我們需要指出 React 比 Vue 更好的地方，像是他們的生態(tài)系統(tǒng)和豐富的自定義渲染器。

React && Vue的性能

渲染性能

在渲染用戶界面的時(shí)候，DOM 的操作成本是最高的，不幸的是沒有庫可以讓這些原始操作變得更快。
我們能做到的最好效果就是（來源google）:

Minimize the number of necessary DOM mutations. Both React and Vue use virtual DOM abstractions to accomplish this and both implementations work about equally well.

Add as little overhead (pure JavaScript computations) as possible on top of those DOM manipulations. This is an area where Vue and React differ.

The JavaScript overhead is directly related to the mechanisms of computing the necessary DOM operations. Both Vue and React utilizes Virtual DOM to achieve that, but Vue's Virtual DOM implementation (a fork of snabbdom) is much lighter-weight and thus introduces less overhead than React's.

更新性能

In React, when a component's state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root.

To avoid unnecessary re-renders of child components, you need to implement shouldComponentUpdate everywhere and use immutable data structures. In Vue, a component's dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render.

也就是說，未經(jīng)優(yōu)化的 Vue 相比未經(jīng)優(yōu)化的 React 要快的多。由于 Vue 改進(jìn)過渲染性能，甚至全面優(yōu)化過的 React 通常也會慢于開箱即用的 Vue。

JSX vs Templates

在 React 中，所有的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 Javascript 的一種語法糖。

render () {
  let { items } = this.props
  let children
  if ( items.length > 0 ) {
    children = (
      <ul>
        {items.map( item =>
          <li key={item.id}>{item.name}</li>
        )}
      </ul>
    )
  } else {
    children = <p>No items found.</p>
  }
  return (
    <div className = 'list-container'>
      {children}
    </div>
  )
}

JSX 的渲染功能有下面這些優(yōu)勢：

你可以使用完整的編程語言 JavaScript 功能來構(gòu)建你的視圖頁面。
工具對 JSX 的支持相比于現(xiàn)有可用的其他 Vue 模板還是比較先進(jìn)的（比如，linting、類型檢查、編輯器的自動(dòng)完成）。

在 Vue 中，由于有時(shí)需要用這些功能，Vue也提供了渲染功能 并且支持了 JSX。然而，對于大多數(shù)組件來說，渲染功能是不推薦使用了。
在這方面，Vue提供的是更簡單的模板：

<template>
  <div class="list-container">
    <ul v-if="items.length">
      <li v-for="item in items">
        {{ item.name }}
      </li>
    </ul>
    <p v-else>No items found.</p>
  </div>
</template>

優(yōu)點(diǎn)如下：

在寫模板的過程中，樣式風(fēng)格已定并涉及更少的功能實(shí)現(xiàn)。
模板總是會被聲明的。
模板中任何 HTML 語法都是有效的。
閱讀起來更貼合英語（比如，for each item in items）。
不需要高級版本的 JavaScript 語法，來增加可讀性。
這還沒有結(jié)束。Vue 擁抱 HTML，而不是用 JavaScript 去重塑它。在模板內(nèi)，Vue 也允許你用預(yù)處理器比如 Pug（原名 Jade）

div.list-container
 ul(v-if="items.length")
  li(v-for="item in items") {{ item.name }}
 p(v-else) No items found.

Angular && Vue

Vue 的一些語法和 Angular 的很相似（例如 v-if vs ng-if）。據(jù)Vue開發(fā)者說因?yàn)?Angular 是 Vue 早期開發(fā)的靈感來源。然而，Augular 中存在的許多問題，在 Vue 中已經(jīng)得到解決

復(fù)雜性

在 API 與設(shè)計(jì)兩方面上 Vue.js 都比 Angular 1 簡單得多，因此你可以快速地掌握它的全部特性并投入開發(fā)。

靈活性和模塊化

Vue.js 是一個(gè)更加靈活開放的解決方案。它允許你以希望的方式組織應(yīng)用程序，而不是在任何時(shí)候都必須遵循 Angular 1 制定的規(guī)則，這讓 Vue 能適用于各種項(xiàng)目。我們知道把決定權(quán)交給你是非常必要的。
這也就是為什么我們提供 Webpack template，讓你可以用幾分鐘，去選擇是否啟用高級特性，比如熱模塊加載、linting、CSS 提取等等。

數(shù)據(jù)綁定

Angular 1 使用雙向綁定，Vue 在不同組件間強(qiáng)制使用單向數(shù)據(jù)流。這使應(yīng)用中的數(shù)據(jù)流更加清晰易懂。

指令與組件

在 Vue 中指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個(gè)自給自足的獨(dú)立單元 —— 有自己的視圖和數(shù)據(jù)邏輯。在 Angular 中兩者有不少相混的地方。

性能

Vue 有更好的性能，并且非常非常容易優(yōu)化，因?yàn)樗皇褂门K檢查。

在 Angular 1 中，當(dāng) watcher 越來越多時(shí)會變得越來越慢，因?yàn)樽饔糜騼?nèi)的每一次變化，所有 watcher 都要重新計(jì)算。并且，如果一些 watcher 觸發(fā)另一個(gè)更新，臟檢查循環(huán)（digest cycle）可能要運(yùn)行多次。Angular 用戶常常要使用深?yuàn)W的技術(shù)，以解決臟檢查循環(huán)的問題。有時(shí)沒有簡單的辦法來優(yōu)化有大量 watcher 的作用域。

Vue 則根本沒有這個(gè)問題，因?yàn)樗褂没谝蕾囎粉櫟挠^察系統(tǒng)并且異步隊(duì)列更新，所有的數(shù)據(jù)變化都是獨(dú)立觸發(fā)，除非它們之間有明確的依賴關(guān)系。

有意思的是，Angular 2 和 Vue 用相似的設(shè)計(jì)解決了一些 Angular 1 中存在的問題

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論