摘要:具體步驟實(shí)現(xiàn)將需要的數(shù)據(jù)對象進(jìn)行遞歸遍歷,包括子屬性對象的屬性,都加上和。綜上,在性能上的收益并不是最主要的,更重要的是它使得具備了現(xiàn)代框架應(yīng)有的高級特性。
原文:你應(yīng)該要知道的Vue.js
組件data為什么必須是函數(shù)?因?yàn)榻M件可能被多處使用,但他們的data是私有的,所以每個組件都要return一個新的data對象
組件通信父子組件通信:$on、$emit
非父子組件的通信: event bus
復(fù)雜情況: vuex
怎么動態(tài)添加組件場景:在vue中,點(diǎn)擊button,隨機(jī)生成a、b、c組件中的一個
is
render
思路:設(shè)定一個components數(shù)組,button點(diǎn)擊一次,push一個組件名,v-for遍歷components,并用is或render動態(tài)生成
vue-loader是什么?vue-loader 是一個 webpack 的 loader,可以將單文件組件轉(zhuǎn)換為 JavaScript 模塊
引用文檔的說法:
默認(rèn)支持 ES2015;
允許對 Vue 組件的組成部分使用其它 webpack loader,比如對 使用 Sass 和對 使用 Jade;
.vue 文件中允許自定義節(jié)點(diǎn),然后使用自定義的 loader 進(jìn)行處理;
把 和 中的靜態(tài)資源當(dāng)作模塊來對待,并使用 webpack loader 進(jìn)行處理;
對每個組件模擬出 CSS 作用域;
支持開發(fā)期組件的熱重載。
數(shù)據(jù)雙向綁定原理實(shí)現(xiàn)數(shù)據(jù)綁定的常見做法:
Object.defineProperty:劫持各個屬性的setter,getter
臟值檢測:通過特定事件進(jìn)行輪循
發(fā)布/訂閱模式:通過消息發(fā)布并將消息進(jìn)行訂閱
vue采用的是數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式,通過Object.defineProperty()來實(shí)現(xiàn)對屬性的劫持,并在數(shù)據(jù)變動時(shí)發(fā)布消息給訂閱者,使其觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
具體步驟:
1、 實(shí)現(xiàn)Observer
將需要observe的數(shù)據(jù)對象進(jìn)行遞歸遍歷,包括子屬性對象的屬性,都加上setter和getter。實(shí)現(xiàn)一個消息訂閱器,維護(hù)一個數(shù)組,用來收集訂閱者,數(shù)據(jù)變動觸發(fā)notify,再調(diào)用訂閱者的update方法
2、 實(shí)現(xiàn)Compile
compile解析模板指令,將模板中的變量替換成數(shù)據(jù),然后初始化渲染頁面視圖,并將每個指令對應(yīng)的節(jié)點(diǎn)綁定更新函數(shù),添加監(jiān)聽數(shù)據(jù)的訂閱者,一旦數(shù)據(jù)有變動,收到通知,更新視圖
3、 實(shí)現(xiàn)Watcher
Watcher訂閱者是Observer和Compile之間通信的橋梁
主要做的事情是:
在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己
自身必須有一個update()方法
待屬性變動dep.notice()通知時(shí),能調(diào)用自身的update()方法,并觸發(fā)Compile中綁定的回調(diào),則功成身退。
4、 實(shí)現(xiàn)MVVM
MVVM作為數(shù)據(jù)綁定的入口,整合Observer、Compile和Watcher三者,通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化,通過Compile來解析編譯模板指令,最終利用Watcher搭起Observer和Compile之間的通信橋梁,達(dá)到數(shù)據(jù)變化 -> 視圖更新;視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果
參考:剖析Vue原理&實(shí)現(xiàn)雙向綁定MVVM
對Vue.js的template編譯的理解template會被編譯成AST語法樹,AST會經(jīng)過generate得到render函數(shù),render的返回值是VNode,VNode是Vue的虛擬DOM節(jié)點(diǎn)
vue 為什么采用Virtual DOM?一方面是出于性能方面的考量:
創(chuàng)建真實(shí)DOM的代價(jià)高:真實(shí)的 DOM 節(jié)點(diǎn) node 實(shí)現(xiàn)的屬性很多,而 vnode 僅僅實(shí)現(xiàn)一些必要的屬性,相比起來,創(chuàng)建一個 vnode 的成本比較低。
觸發(fā)多次瀏覽器重繪及回流:使用 vnode ,相當(dāng)于加了一個緩沖,讓一次數(shù)據(jù)變動所帶來的所有 node 變化,先在 vnode 中進(jìn)行修改,然后 diff 之后對所有產(chǎn)生差異的節(jié)點(diǎn)集中一次對 DOM tree 進(jìn)行修改,以減少瀏覽器的重繪及回流
但是性能受場景的影響是非常大的,不同的場景可能造成不同實(shí)現(xiàn)方案之間成倍的性能差距,所以依賴細(xì)粒度綁定及 Virtual DOM哪個的性能更好不是一個容易下定論的問題。更重要的原因是為了解耦HTML依賴,這帶來兩個非常重要的好處是:
不再依賴 HTML 解析器進(jìn)行模版解析,可以進(jìn)行更多的 AOT 工作提高運(yùn)行時(shí)效率:通過模版 AOT 編譯,Vue 的運(yùn)行時(shí)體積可以進(jìn)一步壓縮,運(yùn)行時(shí)效率可以進(jìn)一步提升;
可以渲染到 DOM 以外的平臺,實(shí)現(xiàn) SSR、同構(gòu)渲染這些高級特性,Weex 等框架應(yīng)用的就是這一特性。
綜上,Virtual DOM 在性能上的收益并不是最主要的,更重要的是它使得 Vue 具備了現(xiàn)代框架應(yīng)有的高級特性。
vue 和 react 區(qū)別相同點(diǎn):
都支持SSR
都有Virtual DOM
組件化開發(fā)
數(shù)據(jù)驅(qū)動
...
不同點(diǎn):
vue推薦的是使用 webpack + vue-loader 的單文件組件格式,React 推薦的做法是 JSX + inline style
vue 的Virtual DOM是追蹤每個組件的依賴關(guān)系,不會渲染整個組件樹,react 每當(dāng)應(yīng)該狀態(tài)被改變時(shí),全部子組件都會 re-render
...
更多內(nèi)容待更新...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/93603.html
摘要:在,我們剛剛使用發(fā)布了我們的客戶端的新版本。得到了最多的提及,排在第二位。根據(jù),這個許可證旨在保護(hù)他們免受專利巨魔的侵害。正在獲得更多開發(fā)者的支持,我們在開發(fā)過程中看到了這一點(diǎn),讓我們更加相信,我們的選擇是對的。 showImg(https://segmentfault.com/img/bVbdxdq?w=1960&h=960);在Rever(www.reverscore.com),我...
摘要:在,我們剛剛使用發(fā)布了我們的客戶端的新版本。得到了最多的提及,排在第二位。根據(jù),這個許可證旨在保護(hù)他們免受專利巨魔的侵害。正在獲得更多開發(fā)者的支持,我們在開發(fā)過程中看到了這一點(diǎn),讓我們更加相信,我們的選擇是對的。 showImg(https://segmentfault.com/img/bVbdxdq?w=1960&h=960);在Rever(www.reverscore.com),我...
摘要:同時(shí)增加了單元測試,使用了,增加了可視化配置權(quán)限,增加了自定義布局等等,優(yōu)化了原先的權(quán)限方案,支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的,但正好滿足了我們的需求。它會重寫瀏覽器的對象,從而才能攔截所有請求,代理到本地。 前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來,維護(hù)至今已經(jīng)有兩年多的時(shí)間了了,發(fā)布了四十多個版本,...
摘要:同時(shí)增加了單元測試,使用了,增加了可視化配置權(quán)限,增加了自定義布局等等,優(yōu)化了原先的權(quán)限方案,支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的,但正好滿足了我們的需求。它會重寫瀏覽器的對象,從而才能攔截所有請求,代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來,維護(hù)至今已經(jīng)有兩年多的時(shí)間了了,發(fā)布了四十多個版本,收獲了三...
閱讀 1605·2021-09-23 11:31
閱讀 920·2021-09-23 11:22
閱讀 1337·2021-09-22 15:41
閱讀 4062·2021-09-03 10:28
閱讀 2907·2019-08-30 15:55
閱讀 3536·2019-08-30 15:55
閱讀 1942·2019-08-30 15:44
閱讀 2712·2019-08-30 13:50