技術標籤：vue 插入dom

由於在瀏覽器中操作DOM的代價是非常“昂貴”的，所以才在Vue引入了Virtual DOM，Virtual DOM是對真實DOM的一種抽象描述。使用virtual DOM渲染頁面時，也不會將整個虛擬dom全部渲染。會使用diff演算法，計算Virtual DOM樹改變部分。

Vue的Diff演算法迴圈比較Virtual DOM同級節點，若找不到與新節點型別相同的節點，則插入一個新節點，若有相同型別的節點則進行節點屬性的更新，最後刪除新節點列表中不包含的舊節點。

在Diff中會使用到一種就地複用的策略。就地複用是指Vue會盡可能複用之前的DOM，儘可能不發生DOM的移動。同類節點為型別相同且節點資料一致

  <div id="app">
    <span v-if="isUser">
      <label for="username">使用者賬號</label>
      <input id="username" type="text" placeholder="賬號">
    </span>
    <span v-else>
        <label for="password">使用者密碼</label>
        <input id="password" type="text" placeholder="密碼">
    </span>
    <button @click="isUser=!isUser">按鈕</button>
  </div>
 

上面程式碼中label標籤和input框都是屬於同類節點，點選按鈕切換時會複用。input中的已經輸入的內容也不會清空。

如上圖，輸入框中的內容不會清空。

key

vue中有key的話，就會根據key值去判斷某個是否修改，重新渲染這一項，對資料改變之後的diff更新比較有很大的效能提升。為了更加高效的更新虛擬dom，另外在vue中使用相同標籤元素的過度切換的時候，也需要使用key屬性，其目的是為了讓vue區分它們，否則vue就只會替換其內部屬性而不會觸發過度效果。