前三篇裡,我們開始從render, template, el
的渲染dom樹的優先順序,最終都編譯成render
函式,而後得到vnode
(虛擬dom),經過diff演算法後,得到真實dom。
那麼問題來了?得到真實dom以後接下來該做什麼?以及怎麼做?
照例,分享一篇文章,vue。(官網,暫時還沒有找到一篇文章能比較好的解決上述幾個問題,so,我們帶著問題出發,直接上官網,然後上原始碼。)
我們先解決第乙個問題,得到真實dom以後,接下來該做什麼?
相信各位同學對原生的建立元素節點物件,一定不陌生:
官網裡,有乙個重要的資訊:
是的,在vue裡,也需要插入到dom節點樹上,並且有乙個名字掛載。
於是,第乙個問題解決,真實dom之後,掛載到dom節點樹上。
現在來解決第二個問題,該怎麼掛載到dom節點樹上?
存在兩種種方式(一般是在main.js檔案中可以看到):
這有兩個值得注意的地方:
render: function (createelement)
貼一張官網的圖:或者使用jsx時這樣更容易:
![得到結果](
其中有個`render`方法,於是`render`混入到了`new vue({})`的配置中。
也就是說,如果
el選項
在例項化時,沒有作用,且沒有顯示呼叫vm.$mount()
手動開啟編譯時,是不會編譯成render
函式的,從而不會存在vnode
。編譯成
render
函式,有真實dom以後,插入通過el
選項,或者顯示呼叫vm.$mount()
手動設定乙個掛載點,掛載到dom上。第二個問題解決。
完。
關於一些Vue的文章。(5)
前三篇裡,我們開始從render,template,el的渲染dom樹的優先順序,最終都編譯成render函式,而後得到vnode 虛擬dom 經過diff演算法後,得到真實dom。那麼問題來了?得到真實dom以後接下來該做什麼?以及怎麼做?照例,分享一篇文章,vue。官網,暫時還沒有找到一篇文章能...
關於一些Vue的文章。(4)
diff演算法中的patchvnode方法,以及核心updatechildren方法。在上篇中,我們談到,當vnode不為真實節點,且vnode與oldvnode為同一節點時,會呼叫patchvnode方法。我們直接從原始碼上進行分析 patchvnode 有四個引數 oldvnode 舊的虛擬節點...
關於一些Vue的文章。(7)
還有其他許多,就不一一枚舉出來了。有沒有看上了的?沒有我等下再來問。在這篇文章裡我將是這幾個月來對 vue 學習的乙個小結。vue 和其他的 mvvm 思路是類似的 主要是為了實現三個過程 observer 通過observer對data進行監聽,並且提供訂閱某個資料項的變化的能力。利用object...