Vue學習-vue中的虛擬dom


一、什么是虛擬dom?

虛擬dom 其實就是一個普通的JavaScript對象,用來描敘試圖上有哪些界面結構,並不生成界面,我們可以在生命周期【mounted階段】打印this._vnode,如下:

它描敘了該階段是div,有 哪些子節點,哪些屬性,它是采用一個js對象來描敘這些,但是它並不會顯示在頁面上。

 

 

在vue中,每一個組件都有一個render函數,這個函數會生成一個虛擬dom,這就意味着每一個組件都對應一個虛擬dom樹。

 

 

 

 

二、為什么需要虛擬dom?

這個主要是由vue結構所決定的,在vue中,渲染試圖會調用render函數,不僅在創建視圖的時候被調用,當組件所依賴的數據或者屬性發生了改變的時候,也會調用render函數,如果是使用真實的dom,當創建,修改,刪除,插入dom的話是非常消耗性能的,如下所示,當修改一個js對象遠比操作真實的dom要有效率的多。

<script>
      var times = 10000000;//次數為1000萬次
      //js對象
      console.time(`js object`);
      for (var i = 0; i < times; i++) {
        var obj = {};
      }
      console.timeEnd("js object");
      //真實dom對象
      console.time(`dom object`);
      for (var i = 0; i < times; i++) {
        var obj = document.createElement("div");
      }
      console.timeEnd("dom object");
</script>
「運行結果」:

運行結果:

 

 

 

三、虛擬dom是如何轉換為真實dom的?

  在組件渲染的時候會調用render函數,這個函數會生成一個虛擬的dom,再根據這個虛擬的dom來生成真實的dom,然后將這個真實的dom給掛載到頁面的合適的部位,總的來說創建真實的dom是必不可少的一部分,如果視圖只需要渲染一次,后續數據的改變不會影響到視圖的改變,vue的效率其實要比真實操作dom的效率要低,因為vue還要創建一個虛擬的dom,但是如果組件內有響應式的數據,當數據發生改變的時候,就會調用render 函數來生成一個新的虛擬dom樹,將新的虛擬dom樹和舊的虛擬dom樹進行對比,然后找到必須修改的虛擬dom,最后根據修改的虛擬dom,來修改真實的dom,這樣就保證了對真實的dom操作達到最小的改變,

 

 

在進行新的虛擬dom和舊的虛擬dom對比的算法是patch算法,它會找到新的虛擬dom樹和舊的虛擬dom樹之間的差別。

 

四、模板和虛擬dom的關系?

  在vue中有一個compile模塊,這個模塊將template字符串編譯成render函數,render函數最后返回一個虛擬dom。

  編譯過程分為兩步:

  (1)將template 轉換為AST(抽象語法樹)

  (2)將AST轉換為render函數

    * 使用<script>標簽來引入vue 的,編譯是發生在組件第一次加載的時候,這種稱為 運行時編譯 

    * 第二種是使用 vue-cil 框架生成的 vue 項目,這種是在打包的時候就進行了編譯,稱為 模板預編譯

  編譯 是一個極其耗費性能的操作,預編譯可以有效的提高運行時的性能,而且,由於運行時已經不需要編譯,vue-cli在打包時會排除掉vue中的compile模塊,這樣可以減少打包體積。

 

  模板的存在,僅僅只是為了我們更加方便的書寫界面代碼,vue最終運行的時候,最終需要的是render函數,而不是模板,這里要注意的是vue它是不認識模板的,模板是vue-cli預編譯所需要的,它最終會將模板編譯成render函數提供給vue正常運行。因此模板中的各種語法,在虛擬dom中都是不存在的,它們都會變成虛擬dom的配置。

 

 

 轉自:https://mp.weixin.qq.com/s/g7wQXjXeFNxtLzGS1uM6uA


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM