<cite id="9vvnb"></cite>
<cite id="9vvnb"></cite>
<var id="9vvnb"><strike id="9vvnb"></strike></var>
<menuitem id="9vvnb"><strike id="9vvnb"><listing id="9vvnb"></listing></strike></menuitem>
<cite id="9vvnb"><video id="9vvnb"></video></cite>
<cite id="9vvnb"></cite>
<cite id="9vvnb"><video id="9vvnb"></video></cite>
<var id="9vvnb"></var>
<cite id="9vvnb"></cite><cite id="9vvnb"><span id="9vvnb"></span></cite>
<cite id="9vvnb"><span id="9vvnb"><menuitem id="9vvnb"></menuitem></span></cite>

.net工程師學習vue的心路歷程(二)

本章主要搞懂在通過vue init webpack projectname 命令創建 vue 項目過程中有個選擇。即關于如何選擇:runtime+compiler和runtime+only。

現在我通過命令分別創建了這兩個不同的項目,那么他們的主要區別點就是在main.js文件里面

通過compiler創建的:

通過compiler創建的vue實例下是有一個App組件和一個template,那么這個時候之前說過templat會替換掉index.html中div app掛載的標簽元素。

那么它從創建到運行的這樣一個過程實際上是經歷了幾個最要步驟,什么步驟呢?  

實際上它這一整個創建的vue實例中包括組件和template對象保存到vue底層的一個option里面,保存后就會解析成一個抽象語法樹(abstract  syntax tree)然后通過編譯render進行渲染我們這些template,此時它應該渲染到的是一個虛擬DOM(實際上是虛擬DOM樹也是虛擬DOM節點),最后通過虛擬DOM樹渲染成我們一個真實的DOM,也就是瀏覽器中最終形成的元素標簽。

整個過程實際上是這樣的:

vm.option.template-->(抽象語法樹)ast-->render:function()-->虛擬DOM(virtual dom)-->真實DOM

通過only創建的:

對于這兩個的區別,這里我可能口水話闡述比較多,見諒!

這里主要就是only下的render的區別。

我們都知道render是渲染的意思,這里的箭頭函數相當于:

render:function(h)
{
     return h(App)  
}

那么這里的render實際上就等于通過compiler創建的時候vue運行過程中的第三步。也就是通過only創建的時候整個vue運行過程不需要走第一步template的保存以及第二步抽象語法樹(ast)。那么顯而易見,通過only創建的速度運行效率是比compiler要好的,而且創建出來的內存我沒記錯的話是少6kb的(實際上少的6kb就是沒了前兩步),所以打包起來也是比compiler創建的時候要小的。所以我們在區分這兩個的時候一般是選擇第二種only方式進行創建的。

還有一個就是這個render函數。我把h改成了createElement意思就是創建一個元素,實際上創建的元素就是我們最基礎的html標簽,字不過通過回調將整個app組件對象傳了過去,實際上渲染的還是App組件里面的html標簽,它在這里面已經給我們完成了這件事情,所以是不需要再去通過template以及抽象語法樹去渲染到UI界面?。ㄟ@里只需要知道它是這么創建的就行了)

由于這個比較重要,所以我單獨抽出來作為一篇文章來記錄。。。

posted @ 2021-11-20 22:33  CR7Ronaldo  Views(308)  Comments(2Edit  收藏  舉報
黄色网站在现免费看_黄色网站在线18P_黄色网站在线播放