Vue 原理分析（一）

1. 響應式：vue如何監聽到data的每個屬性變化

什麼是響應式？

var vm =

;var data =
;var key, value;
for(key in data)
,set
:function
(newval)})
;})(key)
;}

1.模版是什麼？

2.render函式與虛擬dom

1.render函式

1⃣️.with的用法

2⃣️.模版中的所有資訊都被render函式包含

3⃣️.模版中用到的data中的屬性，都變成了js的變數

4⃣️.模版中的 v-model v-for v-on 都變成了js邏輯

5⃣️.render函式返回vnode

2. 響應式開始監聽

1⃣️.object.defineproperty函式

2⃣️.將data的屬性**到vm上

3. 首次渲染，顯示頁面，且繫結依賴

1⃣️.初次渲染，執行updatecomponent，執行vm._render()

2⃣️.執行render函式，會訪問到vm.list和vm.title

3⃣️.會被響應式的get方法監聽到

4⃣️.執行updatecomponent，會走到vdom的patch方法

5⃣️.patch將vnode渲染成dom，初次渲染完成

4. data屬性變化，觸發rerender

1⃣️.修改屬性，被響應式的set監聽到

2⃣️.set中執行updatecomponent

3⃣️.updatecomponent重新執行vm._render()

4⃣️.生成vnode和prevvnode,通過patch進行對比

5⃣️.渲染到html中

拓展

什麼是mvvm

Vue中methods原理分析

methods繫結上下文執行環境是通過bind來進行的。固定了這個this。vue考慮到不是所有的瀏覽器都支援bind。於是也實現了自己的polyfillbind function polyfillbind fn,ctx function nativebind ctx varbind functio...

Vue中filter原理分析

頁面中的渲染函式會被生成如下的渲染函式 function 其中 c是渲染函式，會渲染出根元件。可以看到parentname all最終被解析成 f all parentname 接下來主要看一些 f這個函式的作用，以及 f解決了什麼問題？function installrenderhelpers t...

Vue中directive原理分析

vue在處理指令時，會首先判斷指令是新的還是舊的。也就是需要對比舊節點和新節點上的指令。比如新節點比舊節點上多了乙個指令。新節點上指令如下 newdirectives v test2 舊節點上指令如下 newdirectives 可以看到新節點上增加了乙個指令v test2,當我們遍歷發現v tes...