v-if案例解析（element-ui form-item 結合 v-if 動態生成rule規則\表單元素，表單沒法驗證問題剖析 ）

fire

讀在最前面：

　　一、此文章銜接Vue 虛擬Dom 及 部分生命週期初探，相關總體知識點請先閱讀後再繼續本文閱讀

問：當v-if爲true時，會從新渲染相關dom節點嗎?

<child v-if="true"></child>

點擊查看涉案代碼

點擊圖中【切換】字樣 查看效果，以下圖：

流程分析：

一、首先咱們按代碼畫出初始化vnode和點擊切換後的vnode，進行第一次 對比，以下圖

 說明：頭頭比較的時候，節點沒有任何變化，因此直接不動便可，若是a的相關屬性有變更，則直接更新便可

 

 二、第一次循環結束後，咱們a和a已經處理過了，因此下次再也不進行處理，第二次對比開始，以下圖

 

 說明：第二輪結束的時候已經遍歷完成2組節點配對

 

 三、第三次對比開始（注：這裏child節點指外圍父容器節點，內部節點爲div:v-if），以下圖

 說明：到這裏，已經看到了爲何有v-if 爲 ture，但節點仍是從新渲染了，其餘節點類推

 

回到element-ui form-item  結合 v-if 動態生成rule規則\表單元素，表單沒法驗證問題也是同理

由於form-item綁定驗證事件是在mounted中進行的，規則變化後沒有進行從新綁定驗證事件，v-if渲染組件節點diff後被複用了，因此驗證也就天然失效了

 

備註：　　

　　一、virtual-dom-diff 會有dom節點複用問題，針對有狀態依賴關係的儘可能加key做爲區分，這樣能避免不相關節點由於沒有key而出現異常

　　二、在存在大量標籤的狀況下，儘可能不要加深dom層級，塊級切換v-if能夠用template包裹

 

 by：海豚灣-豐