DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> VueJs與ReactJS和AngularJS的異同點
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 中存在的問題

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved