v-if案例解析（element-uiform-item结合v-if动态生成rule规则\表单元素，表单无法验证问题剖析）

fire

读在最前面：

　　1、此文章衔接Vue 虚拟Dom 及 部分生命周期初探，相关整体知识点请先阅读后再继续本文阅读

问：当v-if为true时，会重新渲染相关dom节点吗?

点击查看涉案代码

点击图中【切换】字样 查看效果，如下图：

流程分析：

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后被复用了，所以验证也就自然失效了

 by：海豚湾-丰