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