本篇文章給大家談?wù)剉ue高階組件應(yīng)用場景，以及vue高級(jí)應(yīng)用對應(yīng)的知識(shí)點(diǎn)，希望對各位有所幫助，不要忘了收藏本站喔。

本文目錄一覽：

• 1、react和vue區(qū)別
• 2、vue 高階組件必備知識(shí)$attrs，inheritAttrs，$listenters詳解
• 3、支持復(fù)雜場景的vue和react集成引用的JS插件
• 4、vue和react的區(qū)別之我見
• 5、認(rèn)識(shí)Vue.js+Vue.js的優(yōu)缺點(diǎn)+和與其他前端框架的區(qū)別

react和vue區(qū)別

兩者本質(zhì)的區(qū)別：模板和組件化的區(qū)別

Vue本質(zhì)是 MVVM 框架，由 MVC 發(fā)展而來；

React是前端 組件化 框架，由后端組件化發(fā)展而來；

Vue使用 模板

React使用 JSX

React本身就是 組件化

Vue是在 MVVM 上擴(kuò)展的

共同點(diǎn)：

都支持組件化，都是 數(shù)據(jù)驅(qū)動(dòng)視圖

監(jiān)聽數(shù)據(jù)變化的實(shí)現(xiàn)原理不同：

數(shù)據(jù)流的不同:

高階組件本質(zhì)就是高階函數(shù)，React的組件是一個(gè)純粹的函數(shù)，所以高階函數(shù)對React來說非常簡單。

Vue中組件是一個(gè)被包裝的函數(shù)，并不簡單的就是我們定義組件的時(shí)候傳入的對象或者函數(shù)。

組件通信的區(qū)別：

渲染模版的不同：

Vuex和Redux的區(qū)別:

diff算法不同:

事件機(jī)制不同:

數(shù)據(jù)是否可變：

react 整體是 函數(shù)式 的思想，把組件設(shè)計(jì)成 純組件 ，狀態(tài)和邏輯通過 參數(shù) 傳入，所以在 react 中，是 單向數(shù)據(jù)流 ，推崇結(jié)合 immutable 來實(shí)現(xiàn) 數(shù)據(jù)不可變 。react在 setState 之后會(huì)重新走 渲染 的流程，如果 shouldComponentUpdate 返回的是 true ，就繼續(xù)渲染，如果返回了 false ，就不會(huì)重新渲染

vue 的思想是 響應(yīng)式 的，也就是基于是 數(shù)據(jù)可變 的，通過對每一個(gè)屬性建立 Watcher 來監(jiān)聽，當(dāng)屬性變化的時(shí)候，響應(yīng)式的更新對應(yīng)的虛擬 dom

vue:

react:

react 的性能優(yōu)化需要 手動(dòng) 去做，而 vue 的性能優(yōu)化是 自動(dòng) 的，但是 vue 的 響應(yīng)式機(jī)制 也有問題，就是當(dāng) state 特別多的時(shí)候， Watcher 也會(huì)很多，會(huì)導(dǎo)致 卡頓 ，所以大型應(yīng)用（ 狀態(tài)特別多 的）一般用 react ，更加可控

通過js來操作一切，還是用各自的處理方式:

reac t的思路是 all in js ，通過 js 來生成 html ，所以設(shè)計(jì)了 jsx ，還有通過 js 來操作 css

vue 是把 html，css，js 組合到一起，用 各自 的處理方式， vue 有單文件組件，可以把 html、css、js 寫到一個(gè)文件中， html 提供了 模板引擎 來處理。

類式的組件寫法，還是聲明式的寫法:

react是 類式 的寫法，api很少

vue是 聲明式 的寫法，通過傳入各種 options ， api 和 參數(shù) 都很多。所以 react 結(jié)合 typescript 更容易一起寫，vue稍微復(fù)雜。vue3支持class類式的寫法了

react整體的思路就是 函數(shù)式 ，所以推崇 純組件，數(shù)據(jù)不可變，單向數(shù)據(jù)流 ，當(dāng)然需要雙向的地方也可以做到，比如結(jié)合redux-form，而vue是基于 可變數(shù)據(jù) 的，支持 雙向綁定 。react組件的擴(kuò)展一般是通過高階組件，而vue組件會(huì)使用mixin。vue內(nèi)置了很多功能，而react做的很少，很多都是由社區(qū)來完成的， vue追求的是開發(fā)的簡單 ，而 react更在乎方式是否正確 。

vue 高階組件必備知識(shí)$attrs，inheritAttrs，$listenters詳解

vue 默認(rèn)情況下，父組件是可以直接給子組件的根元素添加 class 和 style 的，但是有時(shí)候我們可能需要在父組件上給子組件添加一些特性綁定( attribute bindings )(我的理解是自定義屬性和一些原生屬性)到子組件的根元素上， inheritAttrs 就是用來控制子組件根元素上是否允許添加父組件在子組件上定義的特性屬性，因?yàn)?inheritAttrs 默認(rèn)為 true ，所以我們在父組件中給子組件添加所有特性綁定，都能綁定到根元素，例如下面

渲染后的dom節(jié)點(diǎn)：

把 inheritAttrs 設(shè)為 false 后，

渲染后的dom節(jié)點(diǎn)：

可以得出上述的結(jié)論， inheritAttrs 是用來控制子組件根元素上是否允許添加父組件在子組件上定義的特性屬性。

注意：

我們可以把父作用域中傳遞的所有屬性看作一個(gè)大的對象 obj ，而 $attrs 會(huì)繼承 obj 中的一部分屬性，這一部分屬性的 key 不能為 class ，和 style ，也不能是當(dāng)前組件聲明的 props 值，并且父組件為 v-model 的話，也是不能繼承指令封裝的 value 值的，若當(dāng)前組件無props設(shè)置， $attrs 則繼承除 class 和 style 的所有屬性。

通常我們給已封裝的組件進(jìn)行中間處理的時(shí)候使用，例如 element-ui 的 el-input ，我們需要把父組件中的傳遞的 props 直接給子組件的子組件的時(shí)候，我們就可以用到 $attrs ，例如：

父組件為：

子組件為：

根據(jù)上面所說，去掉 class ，去掉指定的 value ，去掉子組件 props 聲明的 limit ，那時(shí)我們此的 $attrs 是：

我們對ui框架中的組件進(jìn)行再封裝的時(shí)候，例如element-ui中的組件 el-input ，我們把他封裝到我們自己的組件內(nèi)部。

例如 self-input 組件如下，

我們需要把 el-input 組件上自定義的事件傳遞進(jìn)去，那么就要用到 $listenters 。

官網(wǎng)的描述：

很容易理解， .native 是給子組件根元素添加事件，自然不是用來傳給子組件上的子組件或元素。而我們在父組件上給子組件綁定的所有事件，都會(huì)放入 $listeners 中，我們可以在子組件中手動(dòng)過濾修改后傳給子組件中的子組件或者元素上，也可以用 v-on="$listeners" ，直接全部傳給子組件或者元素上。

用法也相當(dāng)簡單，例如：

父組件：

子組件：

由于父組件傳入的是一個(gè)change事件和兩個(gè)input事件，那我們打印的 this.$listeners 是

下面是一個(gè)關(guān)于限制小數(shù)點(diǎn)的完整demo，感興趣的可以了解一下

支持復(fù)雜場景的vue和react集成引用的JS插件

眾所周知，React更純粹，Vue做的封裝更多，所以大多數(shù)的難度都是集中在react的組件引用vue組件的過程中

請參考

請參考

由于react hooks的取名規(guī)范是use開頭，所以將use開頭的方法全部修改成了apply開頭，老的use開頭方法仍然有效

在react組件中使用vue組件，如果要使用vue的sync修飾，使用 sync Object

在react組件中使用vue的組件

在react組件中，向vue組件傳遞具名插槽和作用域插槽，以及綁定自定義事件，以及v-model應(yīng)用

react本身并不支持v-model，所以需要通過 model的value和setter也不需要變化

在react組件動(dòng)態(tài)引用vue組件，類似vue的component /

與react不同，vue有全局注冊組件的功能，使每個(gè)組件不需要再單獨(dú)引入

將vue全局組件的id作為參數(shù)傳入applyVueInReact中，或者將id作為component屬性的值傳入VueContainer中

示例：在react中使用全局的vue版本element-ui的DatePicker

在Vue的組件中使用React組件

在Vue組件中，向React組件傳遞具名插槽和作用域插槽，以及綁定自定義事件

由于React沒有插槽的概念，所有都是以屬性存在，Vue的具名插槽和作用域插槽會(huì)被轉(zhuǎn)化為React的屬性，其中作用域插槽會(huì)轉(zhuǎn)換成render props的方式

并且Vue組件的事件也會(huì)被轉(zhuǎn)化成React的屬性

比如react版本的antd的Card組件，在react中的使用示例如下

react版本的antd，在vue組件中使用的示例如下

作用：使得所有的Vue組件可以使用redux的狀態(tài)管理

對工具包開啟redux狀態(tài)管理，這個(gè)場景一般存在于以React為主的項(xiàng)目中，為了使Vue組件也可以共享到redux，需要在項(xiàng)目的入口文件引入applyRedux方法（整個(gè)項(xiàng)目應(yīng)該只引一次），將redux的store以及redux的context作為參數(shù)傳入（或者至少在redux的Provider高階組件引入的地方使用applyRedux方法）

React組件連接redux的方式這里就不再做介紹了，應(yīng)該使用react-redux的connect方法

這里介紹Vue組件如何使用redux，工具包盡可能的實(shí)現(xiàn)了vue組件使用vuex的方式去使用redux，通過vm.$redux可以在組件實(shí)例里獲取到redux狀態(tài)管理

作用：使得所有的Redux組件可以使用Vuex的狀態(tài)管理

對工具包開啟vuex狀態(tài)管理，這個(gè)場景一般存在于以Vue為主的項(xiàng)目中，為了使React組件也可以共享到vuex，需要在項(xiàng)目的入口文件引入applyVuex方法（整個(gè)項(xiàng)目應(yīng)該只引一次），將vuex的store作為參數(shù)傳入

類似react-redux的connect方法，在React組件中使用，由于vuex的關(guān)鍵字比redux多，所以將參數(shù)改成了對象，包含了mapStateToProps、mapCommitToProps、mapGettersToProps、mapDispatchToProps，每個(gè)都是一個(gè)純函數(shù)，返回一個(gè)對象（和redux的connect使用方式完全一致）

在React的router里懶加載Vue組件

在Vue的router里懶加載React組件

每個(gè)通過applyVueInReact的的vue組件，以及通過applyReactInVue的react組件，都可以收到一個(gè)data-passed-props的屬性，這個(gè)屬性可以幫助你不做任何包裝的，被之后再次使用applyVueInReact或applyReactInVue的組件收到全部的屬性（由于是跨框架透傳，原生的透傳方式并不會(huì)自動(dòng)做相應(yīng)的封裝和轉(zhuǎn)換）

由于在每一次跨越一個(gè)框架進(jìn)行組件引用時(shí)，都會(huì)出現(xiàn)一層包囊，這個(gè)包囊是以div呈現(xiàn)，并且會(huì)被特殊屬性標(biāo)注

React-Vue，會(huì)在vue組件的dom元素外包囊一層標(biāo)識(shí)data-use-vue-component-wrap的div

Vue-React，會(huì)在react組件的dom元素外包囊一層標(biāo)識(shí)__use_react_component_wrap的div

如果引發(fā)樣式問題，可以全局對這些標(biāo)識(shí)進(jìn)行樣式修正

vue和react的區(qū)別之我見

react和vue都是做組件化的，整體的功能都類似，但是他們的設(shè)計(jì)思路是有很多不同的。使用react和vue，主要是理解他們的設(shè)計(jì)思路的不同。

react整體是函數(shù)式的思想，把組件設(shè)計(jì)成純組件，狀態(tài)和邏輯通過參數(shù)傳入，所以在react中，是單向數(shù)據(jù)流，推崇結(jié)合immutable來實(shí)現(xiàn)數(shù)據(jù)不可變。react在setState之后會(huì)重新走渲染的流程，如果shouldComponentUpdate返回的是true，就繼續(xù)渲染，如果返回了false，就不會(huì)重新渲染，PureComponent就是重寫了shouldComponentUpdate，然后在里面作了props和state的淺層對比。

而vue的思想是響應(yīng)式的，也就是基于是數(shù)據(jù)可變的，通過對每一個(gè)屬性建立Watcher來監(jiān)聽，當(dāng)屬性變化的時(shí)候，響應(yīng)式的更新對應(yīng)的虛擬dom。

總之，react的性能優(yōu)化需要手動(dòng)去做，而vue的性能優(yōu)化是自動(dòng)的，但是vue的響應(yīng)式機(jī)制也有問題，就是當(dāng)state特別多的時(shí)候，Watcher也會(huì)很多，會(huì)導(dǎo)致卡頓，所以大型應(yīng)用（狀態(tài)特別多的）一般用react，更加可控。

react的思路是all in js，通過js來生成html，所以設(shè)計(jì)了jsx，還有通過js來操作css，社區(qū)的styled-component、jss等，

vue是把html，css，js組合到一起，用各自的處理方式，vue有單文件組件，可以把html、css、js寫到一個(gè)文件中，html提供了模板引擎來處理。

react是類式的寫法，api很少，

而vue是聲明式的寫法，通過傳入各種options，api和參數(shù)都很多。所以react結(jié)合typescript更容易一起寫，vue稍微復(fù)雜。

react可以通過高階組件（Higher Order Components--HOC）來擴(kuò)展，而vue需要通過mixins來擴(kuò)展

一個(gè)react高階組件的例子：

react做的事情很少，很多都交給社區(qū)去做，vue很多東西都是內(nèi)置的，寫起來確實(shí)方便一些，

比如 redux的combineReducer就對應(yīng)vuex的modules，

比如reselect就對應(yīng)vuex的getter和vue組件的computed，

vuex的mutation是直接改變的原始數(shù)據(jù)，而redux的reducer是返回一個(gè)全新的state，所以redux結(jié)合immutable來優(yōu)化性能，vue不需要。

上面主要梳理了react和vue的4點(diǎn)不同：

（其中第3點(diǎn)在vue3.0支持類式寫法之后就可以去掉了）

react整體的思路就是函數(shù)式，所以推崇純組件，數(shù)據(jù)不可變，單向數(shù)據(jù)流，當(dāng)然需要雙向的地方也可以做到，比如結(jié)合redux-form，而vue是基于可變數(shù)據(jù)的，支持雙向綁定。react組件的擴(kuò)展一般是通過高階組件，而vue組件會(huì)使用mixin。vue內(nèi)置了很多功能，而react做的很少，很多都是由社區(qū)來完成的，vue追求的是開發(fā)的簡單，而react更在乎方式是否正確。

認(rèn)識(shí)Vue.js+Vue.js的優(yōu)缺點(diǎn)+和與其他前端框架的區(qū)別

認(rèn)識(shí)Vue.js+Vue.js的優(yōu)缺點(diǎn)+和與其他前端框架的區(qū)別

首先，我們先了解什么是MVX框架模式？MVX框架模式：MVC+MVP+MVVM1.MVC：Model(模型)+View(檢視)+controller(控制器)，主要是基于分層的目的，讓彼此的職責(zé)分開。View通過Controller來和Model聯(lián)絡(luò)，Controller是View和Model的協(xié)調(diào)者，View和Model不直接聯(lián)絡(luò)，基本聯(lián)絡(luò)都是單向的。使用者User通過控制器Controller來操作模板Model從而達(dá)到檢視View的變化。2.MVP：是從MVC模式演變而來的，都是通過Controller/Presenter負(fù)責(zé)邏輯的處理+Model提供資料+View負(fù)責(zé)顯示。在MVP中，Presenter完全把View和Model進(jìn)行了分離，主要的程式邏輯在Presenter里實(shí)現(xiàn)。并且，Presenter和View是沒有直接關(guān)聯(lián)的，是通過定義好的介面進(jìn)行互動(dòng)，從而使得在變更View的時(shí)候可以保持Presenter不變。MVP模式的框架：Riot,js。3.MVVM：MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。View的變化會(huì)自動(dòng)更新到ViewModel,ViewModel的變化也會(huì)自動(dòng)同步到View上顯示。這種自動(dòng)同步是因?yàn)閂iewModel中的屬性實(shí)現(xiàn)了Observer，當(dāng)屬性變更時(shí)都能觸發(fā)對應(yīng)的操作。MVVM模式的框架有：AngularJS+Vue.js和Knockout+Ember.js后兩種知名度較低以及是早起的框架模式。Vue.js是什么？看到了上面的框架模式介紹，我們可以知道它是屬于MVVM模式的框架。那它有哪些特性呢？其實(shí)Vue.js不是一個(gè)框架，因?yàn)樗痪劢箼z視層，是一個(gè)構(gòu)建資料驅(qū)動(dòng)的Web介面的庫。Vue.js通過簡單的API（應(yīng)用程式程式設(shè)計(jì)介面）提供高效的資料系結(jié)和靈活的元件系統(tǒng)。Vue.js的特性如下：1.輕量級(jí)的框架2.雙向資料系結(jié)3.指令4.外掛化Vue.js與其他框架的區(qū)別？1.與AngularJS的區(qū)別相同點(diǎn)：都支援指令：內(nèi)建指令和自定義指令。都支援過濾器：內(nèi)建過濾器和自定義過濾器。都支援雙向資料系結(jié)。都不支援低端瀏覽器。不同點(diǎn)：1.AngularJS的學(xué)習(xí)成本高，比如增加了DependencyInjection特性，而Vue.js本身提供的API都比較簡單、直觀。2.在效能上，AngularJS依賴對資料做臟檢查，所以Watcher越多越慢。Vue.js使用基于依賴追蹤的觀察并且使用非同步佇列更新。所有的資料都是獨(dú)立觸發(fā)的。對于龐大的應(yīng)用來說，這個(gè)優(yōu)化差異還是比較明顯的。2.與React的區(qū)別相同點(diǎn)：React采用特殊的JSX語法，Vue.js在元件開發(fā)中也推崇編寫.vue特殊檔案格式，對檔案內(nèi)容都有一些約定，兩者都需要編譯后使用。中心思想相同：一切都是元件，元件例項(xiàng)之間可以巢狀。都提供合理的鉤子函式，可以讓開發(fā)者定制化地去處理需求。都不內(nèi)建列數(shù)AJAX，Route等功能到核心包，而是以外掛的方式載入。在元件開發(fā)中都支援mixins的特性。不同點(diǎn)：React依賴VirtualDOM,而Vue.js使用的是DOM模板。React采用的VirtualDOM會(huì)對渲染出來的結(jié)果做臟檢查。Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作DOM。如何使用Vue.js?1.安裝（1）script如果專案直接通過script載入CDN檔案，程式碼示例如下：(2)npm如果專案給予npm管理依賴，則可以使用npm來安裝Vue,執(zhí)行如下命令：$npmivue--save-dev(3)bower如果專案基于bower管理依賴，則可以使用bower來安裝Vue，執(zhí)行如下命令：$bowerivue--save-dev

Vue.js與其他框架的區(qū)別：

1.與AngularJS的區(qū)別

相同點(diǎn)：

都支援指令：內(nèi)建指令和自定義指令。

都支援過濾器：內(nèi)建過濾器和自定義過濾器。

都支援雙向資料系結(jié)。

都不支援低端瀏覽器。

不同點(diǎn)：

1.AngularJS的學(xué)習(xí)成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀。

2.在效能上，AngularJS依賴對資料做臟檢查，所以Watcher越多越慢。

Vue.js使用基于依賴追蹤的觀察并且使用非同步佇列更新。所有的資料都是獨(dú)立觸發(fā)的。

對于龐大的應(yīng)用來說，這個(gè)優(yōu)化差異還是比較明顯的。

2.與React的區(qū)別

相同點(diǎn)：

React采用特殊的JSX語法，Vue.js在元件開發(fā)中也推崇編寫.vue特殊檔案格式，對檔案內(nèi)容都有一些約定，兩者都需要編譯后使用。

中心思想相同：一切都是元件，元件例項(xiàng)之間可以巢狀。

都提供合理的鉤子函式，可以讓開發(fā)者定制化地去處理需求。

都不內(nèi)建列數(shù)AJAX，Route等功能到核心包，而是以外掛的方式載入。

在元件開發(fā)中都支援mixins的特性。

不同點(diǎn)：

React依賴Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM會(huì)對渲染出來的結(jié)果做臟檢查。

Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作DOM。

我知道vue2.0和angularJS的區(qū)別，這兩個(gè)框架非常的像，但是在vue2.0后可以將js+css寫成一個(gè)元件，你想在什么頁面用引入這個(gè)元件就可以用了。這很變態(tài)。

比如你在一個(gè)專案中自己寫了個(gè)帶搜尋框的input ，你把他寫成了一個(gè)元件，xxx.vue

直接把xxx.vue移到另一個(gè)專案，只要在另一個(gè)專案中需要 帶搜尋框的input ，直接引用就可以了。

現(xiàn)在大多數(shù)框架都是以一個(gè)元件的形式搭建一個(gè)專案

vue是什么 vue特點(diǎn) vue和其他前端框架區(qū)別

vue是什么

Vue.js (讀音 /vju?/，類似于 view) 是一套基于javascript的用于構(gòu)建使用者介面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注檢視層，它不僅易于上手，還便于與第三方庫或既有專案整合。另一方面，當(dāng)與單檔案元件和 Vue 生態(tài)系統(tǒng)支援的庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程式提供驅(qū)動(dòng)。

vue特點(diǎn)

簡潔、輕量、元件化、快速、資料驅(qū)動(dòng)、模組友好

vue和其他前端框架區(qū)別

1.與AngularJS的區(qū)別

相同點(diǎn)：

都支援指令：內(nèi)建指令和自定義指令。

都支援過濾器：內(nèi)建過濾器和自定義過濾器。

都支援雙向資料系結(jié)。

都不支援低端瀏覽器。

不同點(diǎn)：

1AngularJS的學(xué)習(xí)成本高，比如增加了Dependency Injection(依賴注入)特性，而Vue.js本身提供的API都比較簡單、直觀。

2在效能上，AngularJS依賴對資料做臟檢查，所以Watcher越多越慢。

Vue.js使用基于依賴追蹤的觀察并且使用非同步佇列更新。所有的資料都是獨(dú)立觸發(fā)的。

對于龐大的應(yīng)用來說，這個(gè)優(yōu)化差異還是比較明顯的。

手機(jī)渲染速度：angular1 300ms * vue 200ms * react 100ms

2.與React的區(qū)別

相同點(diǎn)：

React采用特殊的JSX語法，Vue.js在元件開發(fā)中也推崇編寫.vue特殊檔案格式，對檔案內(nèi)容都有一些約定，兩者都需要編譯后使用。

中心思想相同：一切都是元件，元件例項(xiàng)之間可以巢狀。

都提供合理的鉤子函式，可以讓開發(fā)者定制化地去處理需求。

都不內(nèi)建列數(shù)AJAX，Route等功能到核心包，而是以外掛的方式載入。

在元件開發(fā)中都支援mixins的特性。

不同點(diǎn)：

React依賴Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM會(huì)對渲染出來的結(jié)果做臟檢查。

Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作DOM。

vue的應(yīng)用場景

簡單地說，就是需要對 DOM 進(jìn)行很多自定義操作的專案小專案;理論上 Vue 配合類似Flux的架構(gòu)也可以勝任超大規(guī)模多人協(xié)作的復(fù)雜專案。

如何用vue.js和ionic搭建前端框架

前端可以用flightplan.js 部署。 var config = require("./webpack.config.js"); var webpack = require("webpack") var webpackDevServer=require("webpack-dev-server") confi

vue.js高仿餓了么外賣app 2016最火前端框架

React

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

使用 Virtual DOM

提供了響應(yīng)式（Reactive）和元件化（Composable）的檢視元件。

保持注意力集中在核心庫，伴隨于此，有配套的路由和負(fù)責(zé)處理全域性狀態(tài)管理的庫。

相似的作用域，我們會(huì)用更多的時(shí)間來講這一塊的比較。不僅我們要保持技術(shù)的準(zhǔn)確性，同時(shí)兼顧平衡。我們指出React比Vue更好的地方，例如，他們的生態(tài)系統(tǒng)和豐富的自定義渲染器。

React社群在這里非常積極地幫助我們實(shí)現(xiàn)這一平衡，特別感謝來自 React 團(tuán)隊(duì)的 Dan Abramov 。他非?？犊幕ㄙM(fèi)時(shí)間來貢獻(xiàn)專業(yè)知識(shí)，來幫我們完善這個(gè)檔案，直到我們都滿意。

這么說，就是希望你能對這兩個(gè)庫的比較的公平性感到放心。

效能簡介

到目前為止，在現(xiàn)實(shí)的測試中，Vue 是優(yōu)于 React 的（通常至少快20%-50%，盡管在某些情況下還要更快）。我們可以提供一個(gè)到這個(gè)參照專案的連結(jié)，但是坦率的說，所有的參照在某些方面是有缺陷的，很少有像你所寫的一個(gè)真實(shí)應(yīng)用。那么，讓我們詳細(xì)了解下吧。

渲染效能

在渲染使用者介面的時(shí)候，DOM的操作是最昂貴，不幸的是沒有庫可以讓這些原始操作變得更快。

我們能做的最好的就是：

盡量減少DOM操作。Vue 和 React 都使用虛擬DOM來實(shí)現(xiàn)，并且兩者工作一樣好。

盡量減少除DOM操作以外的其他操作。這是 Vue 和 React的一個(gè)不同的地方。

假如說，在React中，渲染一個(gè)元素的額外開銷是1，而平均渲染一個(gè)元件的開銷是2。在Vue中，一個(gè)元素的開銷更像0/vue/dist/vue.js"/script 然后就可編寫Vue程式碼并應(yīng)用到生產(chǎn)中，而不用擔(dān)心效能問題。

由于起步階段不需學(xué)JSX，ES2015 或構(gòu)建系統(tǒng)，所以建立應(yīng)用花的時(shí)間會(huì)更少。

本地渲染

ReactNative能使你用相同的元件模型編寫有本地渲染能力的APP（IOS或Android）。能同時(shí)跨多平臺(tái)開發(fā)，對開發(fā)者是非常棒的。相應(yīng)地，Vue和Weex會(huì)進(jìn)行官方合作，Weex是阿里的跨平臺(tái)使用者介面開發(fā)框架，Weex 的 JavaScript 框架執(zhí)行時(shí)用的就是Vue。這以為著不僅在瀏覽器，在 IOS 和 Android 上面也可以用 Vue 來進(jìn)行開發(fā)。

在現(xiàn)在，Weex 還在積極發(fā)展，成熟度也不能和 ReactNative 相抗衡。但是，Weex的發(fā)展是由世界上最大的電子商務(wù)企業(yè)的需求在驅(qū)動(dòng)，Vue 團(tuán)隊(duì)也會(huì)和 Weex 團(tuán)隊(duì)積極合作確保為開發(fā)者帶來良好的開發(fā)體驗(yàn)。

MobX

Mobx 在 React 社群很流行，實(shí)際上在Vue也采用了幾乎相同的反應(yīng)系統(tǒng)。在有限程度上，React + Mobx 也可以被認(rèn)為是更繁瑣的 Vue，所以如果你習(xí)慣組合使用它們，那么選擇 Vue 會(huì)更合理。

Angular 1

Due的一些語法和Angular的很相似（例如 v-if vs ng-if）。因?yàn)锳ngular是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能適用于各種專案。我們知道把決定權(quán)交給你，是非常必要的，就是是為什么提供Webpack template，讓你用幾分鐘，去選擇是否用高階特性，比如熱模組載入、linting 、

Css extraction 等等。

資料系結(jié)

Angular 1 使用雙向系結(jié)，Vue在不同元件間強(qiáng)制適用單向資料流。這使應(yīng)用中的資料流清晰易懂。

指令與元件

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

效能

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

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

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

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

Angular 2

Augluar 2完全是一個(gè)全新的框架。例如,它具有優(yōu)秀的元件系統(tǒng)，并且許多實(shí)現(xiàn)已經(jīng)完全重寫，API也完全改變了。

TypeScript

Angular 1面向的較小的應(yīng)用程式，Angular 2已轉(zhuǎn)移焦點(diǎn)，面向的是大型企業(yè)應(yīng)用。TypeScript被引用，這對那些喜歡用Java或者C#等型別安全的語言的人是非常有用的。

Vue也適合企業(yè)應(yīng)用，也可以使用TypeScript來支援官方型別和使用者貢獻(xiàn)的型別，盡管這是可選的。

尺寸和效能

在效能方面，這兩個(gè)框架都是非?？臁５侨绻銠z視第三方參照，就可以得出 Vue 2 比 Angular2 要快的。

在尺寸方面，雖然 Angular 2 使用 tree-shaking 技術(shù)和編譯技術(shù)能使程式碼尺寸減小。

即便包含編譯器和全部功能 Vue2(23kb)比起 Angular 2(50kb)還是小的多。但是要注意，用 Angular 的 App 的尺寸縮減是用 tree-shaking 移除了那些框架中沒有用到的功能，當(dāng)隨著引入功能的增多，尺寸會(huì)越來越大。

靈活性

Vue 官方提供了構(gòu)建工具，但沒限制你如何構(gòu)建。有人喜歡用統(tǒng)一的方式構(gòu)建，也有很多開發(fā)者喜歡這種靈活自由的方式。

學(xué)習(xí)曲線

開始使用Vue，你使用的是熟悉的HTML、符合ES5規(guī)則的JavaScript（也就是純JavaScript）。有了這些基本的技能，你可以快速地掌握它(指南)并投入開發(fā) 。

Angular 2 的學(xué)習(xí)曲線是非常陡峭的。即使不包括TypeScript，它們開始指南中所用的就有ES2015標(biāo)準(zhǔn)的JavaScript，18個(gè)NPM依賴包，4個(gè)檔案和超過3千多字介紹，這一切都是為了完成個(gè)Hello World。而Vue's Hello World就非常簡單。

Ember

Ember 是一個(gè)全能框架。它提供大量的約定，一旦你熟悉了它們，開發(fā)會(huì)很高效。不過，這也意味著學(xué)習(xí)曲線較高，而且不靈活。在框架和庫（加上一系列松散耦合的工具）之間權(quán)衡選擇。后者更自由，但是也要求你做更多的架構(gòu)決定。

也就是說，最好比較 Vue.js 核心和 Ember 的模板與資料模型層：

Vue 在普通 JavaScript 物件上建立響應(yīng)，提供自動(dòng)化的計(jì)算屬性。在 Ember 中需要將所有東西放在 Ember 物件內(nèi)，并且手工為計(jì)算屬性宣告依賴。

Vue 的模板語法可以用全功能的 JavaScript 表示式，而 Handlebars 的語法和幫助函式語法相比之下非常受限。

在效能上，Vue 甩開 Ember 幾條街，即使是 Ember2.0 的最新Glimmer引擎。Vue自動(dòng)批量更新，Ember 當(dāng)效能關(guān)鍵處需要手動(dòng)管理。

Knockout

Knockout 是MVVM領(lǐng)域內(nèi)的先驅(qū)，并且追蹤依賴。它的響應(yīng)系統(tǒng)和Vue相似。它對瀏覽器支援以及所有的表現(xiàn)也是讓人印象深刻的。它能最低支援到IE6，而Vue最低只能支援到IE9。

隨著時(shí)間的推移，Knockout的發(fā)展已有所放緩，并且略顯有點(diǎn)老舊了。比如，它的元件系統(tǒng)缺少完備的生命周期事件方法，盡管這些在現(xiàn)在是非常常見。以及相比Vue呼叫子元件的介面顯得有點(diǎn)笨重。

如果你有興趣研究，會(huì)發(fā)現(xiàn)它們在介面設(shè)計(jì)的構(gòu)思理念上是不同的。這些通過各自建立的 simple Todo List 可以體現(xiàn)出來?；蛟S有點(diǎn)主觀，但是很多人認(rèn)為Vue的API介面更簡單結(jié)構(gòu)更優(yōu)雅。

Polymer

Polymer 是另一個(gè)由谷歌贊助的專案，事實(shí)上也是Vue的一個(gè)靈感來源。Vue的元件可以粗略的類比于Polymer的自定義元素，并且兩者具有相似的開發(fā)風(fēng)格。最大的不同之處在于，Polymer是構(gòu)建于最新版的Web Components標(biāo)準(zhǔn)之上的，并且需要非凡的polyfills來工作（效能下降），瀏覽器本身不支援這些功能。相比而言，Vue不需要依賴polyfills來工作，最低到IE9。

在 Polymer 1.0版本中，為了彌補(bǔ)效能，團(tuán)隊(duì)非常有限的使用資料系結(jié)系統(tǒng)。例如，在Ploymer中支援的唯一表達(dá)式只有布林值否定和單一的方法的呼叫，它的puted方法的實(shí)現(xiàn)也不是很靈活。

Polymer 自定義的元素是用HTML檔案來建立的，這回限制你的普通的JavaScript/CSS（和被現(xiàn)代瀏覽器普遍支援的語言特性）。相比之下，Vue的單檔案允許你非常容易的使用ES2015和你想用的Css的預(yù)編譯處理器。

當(dāng)部署到生產(chǎn)環(huán)境的時(shí)候，Polymer建議使用HTML Imports載入所有資源。而這要求伺服器和客戶端都支援Http 2.0協(xié)議，且瀏覽器實(shí)現(xiàn)了標(biāo)準(zhǔn)。這是否可行就取決于你的目標(biāo)使用者和部署環(huán)境了。如果狀況不佳，你必須用Vulcanizer工具來來打包Polymer元素。在這方面，Vue 可以結(jié)合非同步元件的特性和Webpack的程式碼分割特性來實(shí)現(xiàn)懶載入（lazy-loaded）。這同時(shí)確保了對舊瀏覽器的相容且又能更快載入。

對Vue和Web Component標(biāo)準(zhǔn)之間進(jìn)行深層次的整合，也是完全可行的，比如Custom Elements、Shadow DOM的樣式封裝。然而現(xiàn)在在我們做出嚴(yán)肅的承諾之前，我們?nèi)栽诘却龢?biāo)準(zhǔn)成熟，進(jìn)而廣泛應(yīng)用于主流的瀏覽器中。

Riot

Riot 2.0 提供了一個(gè)類似于基于元件的開發(fā)模型（在Riot中稱之為”Tag”），提供小巧精美的API。Riot 和 Vue 可能共享一些設(shè)計(jì)理念。即使相比Roit重一點(diǎn)，Vue還是有很多顯著優(yōu)勢的：

根據(jù)真實(shí)條件來渲染，Roit根據(jù)是否有分支簡單顯示或隱藏所有內(nèi)容。

功能更加強(qiáng)大的路由機(jī)制，Roit的路由功能的API是極少的。

更多成熟工具的支援。Vue 提供官方支援Webpack、Browserify和SystemJS，而 Roit 是依靠社群來建立整合系統(tǒng)。

過渡效果系統(tǒng)。Riot現(xiàn)在沒有提供。

更好的效能。Roit 盡管廣告稱用虛擬DOM，實(shí)際上用的還是臟檢查機(jī)制，因此和Angular 1患有相同的效能問題。

以上所述是我給大家介紹的Vue.js 2.0 和 React、Augular等其他前端框架大比拼，希望對大家有所幫助，如果大家有任何疑問請給我留言，我會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對指令碼之家網(wǎng)站的支援！

react.js vue.js 這些前端框架都必須在node.js上才能跑嗎

這些js寫的吧，你tomcat怎么解析js，而且tomcat也是呼叫第三方的直譯器來解析程式碼，你看node.js能不能整合到tomcat，有沒有類似的外掛。

并不是，你本地隨便建個(gè)檔案就能跑。

vue高階組件應(yīng)用場景的介紹就聊到這里吧，感謝你花時(shí)間閱讀本站內(nèi)容，更多關(guān)于vue高級(jí)應(yīng)用、vue高階組件應(yīng)用場景的信息別忘了在本站進(jìn)行查找喔。