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