VueJs與ReactJS和AngularJS的異同點_javascript技巧

React && Vue

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

• 使用 Virtual DOM
• 提供了響應式（Reactive）和組件化（Composable）的視圖組件。
• 將注意力集中保持在核心庫，伴隨於此，有配套的路由和負責處理全域狀態管理的庫。
  

由於有著眾多的相似處，我們會用更多的時間在這一塊進行比較。這裡我們不只保證技術內容的準確性，同時也兼顧了平衡的考量。我們需要指出 React 比 Vue 更好的地方，像是他們的生態系統和豐富的自訂渲染器。

React && Vue的效能

渲染效能

在渲染使用者介面的時候，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.

也就是說，未經最佳化的 Vue 相比未經最佳化的 React 要快的多。由於 Vue 改進過渲染效能，甚至全面最佳化過的 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 的渲染功能有下面這些優勢：

你可以使用完整的程式設計語言 JavaScript 功能來構建你的視圖頁面。
工具對 JSX 的支援相比於現有可用的其他 Vue 模板還是比較先進的（比如，linting、類型檢查、編輯器的自動完成）。

在 Vue 中，由於有時需要用這些功能，Vue也提供了渲染功能 並且支援了 JSX。然而，對於大多數組件來說，渲染功能是不推薦使用了。
在這方面，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>

優點如下：

在寫模板的過程中，樣式風格已定並涉及更少的功能實現。
模板總是會被聲明的。
模板中任何 HTML 文法都是有效。
閱讀起來更貼合英語（比如，for each item in items）。
不需要進階版本的 JavaScript 文法，來增加可讀性。
這還沒有結束。Vue 擁抱 HTML，而不是用 JavaScript 去重塑它。在模板內，Vue 也允許你用前置處理器比如 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）。據Vue開發人員說因為 Angular 是 Vue 早期開發的靈感來源。然而，Augular 中存在的許多問題，在 Vue 中已經得到解決

複雜性

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

靈活性和模組化

Vue.js 是一個更加靈活開放的解決方案。它允許你以希望的方式組織應用程式，而不是在任何時候都必須遵循 Angular 1 制定的規則，這讓 Vue 能適用於各種項目。我們知道把決定權交給你是非常必要的。
這也就是為什麼我們提供 Webpack template，讓你可以用幾分鐘，去選擇是否啟用進階特性，比如熱模組載入、linting、CSS 提取等等。

資料繫結

Angular 1 使用雙向繫結，Vue 在不同組件間強制使用單向資料流。這使應用中的資料流更加清晰易懂。

指令與組件

在 Vue 中指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個自給自足的獨立單元 —— 有自己的視圖和資料邏輯。在 Angular 中兩者有不少相混的地方。

效能

Vue 有更好的效能，並且非常非常容易最佳化，因為它不使用髒檢查。

在 Angular 1 中，當 watcher 越來越多時會變得越來越慢，因為範圍內的每一次變化，所有 watcher 都要重新計算。並且，如果一些 watcher 觸發另一個更新，髒檢查迴圈（digest cycle）可能要運行多次。Angular 使用者常常要使用深奧的技術，以解決髒檢查迴圈的問題。有時沒有簡單的辦法來最佳化有大量 watcher 的範圍。

Vue 則根本沒有這個問題，因為它使用基於依賴追蹤的觀察系統並且非同步隊列更新，所有的資料變化都是獨立觸發，除非它們之間有明確的依賴關係。

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。