v-if案例解析（element-ui form-item 结合 v-if 动态生成rule规

<p class="jhl-title">fire

读在最前面：

　　1、此文章衔接，相关整体知识点请先阅读后再继续本文阅读

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

<div class="jhl-desc">

备注：　　

　　1、virtual-dom-diff 会有dom节点复用问题，针对有状态依赖关系的尽量加key作为区分，这样能避免不相关节点因为没有key而出现异常

　　2、在存在大量标签的情况下，尽量不要加深dom层级，块级切换v-if可以用template包裹

　　?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!