v-if案例解析(element-ui form-item表单无法验证问题剖析 )

Posted teamblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了v-if案例解析(element-ui form-item表单无法验证问题剖析 )相关的知识,希望对你有一定的参考价值。

fire

读在最前面:

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


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

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

点击查看涉案代码

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

技术分享图片

流程分析:

1、首先我们按代码画出初始化vnode和点击切换后的vnode,进行第一次 对比,如下图

技术分享图片

 说明:头头比较的时候,节点没有任何变化,所以直接不动即可,如果a的相关属性有变动,则直接更新即可

 

 2、第一次循环结束后,我们a和a已经处理过了,所以下次不再进行处理,第二次对比开始,如下图

技术分享图片

 

 说明:第二轮结束的时候已经遍历完成2组节点配对

 

 3、第三次对比开始,如下图

技术分享图片

 说明:到这里,已经看到了为什么有v-if 为 ture,但节点还是重新渲染了,其他节点类推

 

回到element-ui form-item 无法验证问题也是同理

组件节点被复用了,所以验证也就自然失效了

 

备注:  

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

  2、在存在大量标签的情况下,尽量不要加深dom层级,块级v-if可以用template包裹,这样可以避免不必要的错误(没加key)dom节点复用了问题

 

 by:海豚湾-丰

   

以上是关于v-if案例解析(element-ui form-item表单无法验证问题剖析 )的主要内容,如果未能解决你的问题,请参考以下文章

Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例

element-ui Form表单验证

watch案例解析(element-ui el-select 无法选中问题剖析)

element-ui中的el-table-column使用v-if导致列位置与数据错乱

Element-ui的使用(二):Form表单(基本效验)

agel-form 基于 element-ui form 的二次封装,数据配置表单,快速开发!