fire
讀在最前面：
1、此文章銜接Vue 虛擬Dom 及 部分生命周期初探，相關整體知識點請先閱讀后再繼續本文閱讀
問：當v-if為true時，會重新渲染相關dom節點嗎?
<child v-if="true"></child>
點擊圖中【切換】字樣 查看效果，如下圖：
流程分析：
1、首先我們按代碼畫出初始化vnode和點擊切換后的vnode，進行第一次 對比，如下圖
說明：頭頭比較的時候，節點沒有任何變化，所以直接不動即可，如果a的相關屬性有變動，則直接更新即可
2、第一次循環結束后，我們a和a已經處理過了，所以下次不再進行處理，第二次對比開始，如下圖
說明：第二輪結束的時候已經遍歷完成2組節點配對
3、第三次對比開始（注：這里child節點指外圍父容器節點，內部節點為div:v-if），如下圖
說明：到這里，已經看到了為什么有v-if 為 ture，但節點還是重新渲染了，其他節點類推
回到element-ui form-item 結合 v-if 動態生成rule規則\表單元素，表單無法驗證問題也是同理
因為form-item綁定驗證事件是在mounted中進行的，規則變化后沒有進行重新綁定驗證事件，v-if渲染組件節點diff后被復用了，所以驗證也就自然失效了
備注：
1、virtual-dom-diff 會有dom節點復用問題，針對有狀態依賴關系的盡量加key作為區分，這樣能避免不相關節點因為沒有key而出現異常
2、在存在大量標簽的情況下，盡量不要加深dom層級，塊級切換v-if可以用template包裹
by：海豚灣-豐