VueJs與ReactJS和AngularJS的異同點(diǎn)
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í)有所幫助,也希望大家多多支持腳本之家。
- 淺談vue,angular,react數(shù)據(jù)雙向綁定原理分析
- 前端框架學(xué)習(xí)總結(jié)之Angular、React與Vue的比較詳解
- React中如何引入Angular組件詳解
- 利用angular、react和vue實(shí)現(xiàn)相同的面試題組件
- 如何將你的AngularJS1.x應(yīng)用遷移至React的方法
- JavaScript框架Angular和React深度對比
- 詳解Angular Reactive Form 表單驗(yàn)證
- 在React框架中實(shí)現(xiàn)一些AngularJS中ng指令的例子
- 詳解React Angular Vue三大前端技術(shù)
相關(guān)文章
vue實(shí)現(xiàn)垂直無限滑動(dòng)日歷組件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)垂直無限滑動(dòng)日歷組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁的表格功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)多條件篩選、搜索、排序及分頁的表格功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作
這篇文章主要介紹了vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08詳解實(shí)現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理
這篇文章主要介紹了詳解實(shí)現(xiàn)vue的數(shù)據(jù)響應(yīng)式原理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01vue-router嵌套路由方式(頁面路徑跳轉(zhuǎn)但頁面顯示空白)
這篇文章主要介紹了vue-router嵌套路由方式(頁面路徑跳轉(zhuǎn)但頁面顯示空白),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04利用vue重構(gòu)有贊商城的思路以及總結(jié)整理
這篇文章主要介紹了利用vue重構(gòu)有贊商城的思路以及總結(jié)整理,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式
這篇文章主要介紹了vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03