v-if二次渲染失效问题

合集 - vue(2)

1.v-if二次渲染失效问题2023-06-30

2.vue3封装echarts组件数据更新不同步问题2023-07-10

收起

v-if二次渲染失效问题

背景

​ 在开发中，需要通过条件渲染不同的展示数据和展示图片；但是发现在v-if的条件发生变化之后，有一部分的内容，即dom元素并没有重新刷新，而是残留了一部分原本的元素；

​ 问题截图：（从交流切换到直流情况下）

​ 图中的单位发生了“残影”

​ 并且如果此时从直流再切换回到交流页面，包括展示图片在内，也全部没有重新渲染；

可以发现部分内容已经切换，但是还有很多残留；

​ 第一次遇到这个问题的时候，整个人都不好了；

问题原因：

​ 通过不断排查（百度），最后再查看dom元素的时候，发现如果切换条件，中央这块的dom并没有刷新！！，只是其中的值跟着变了一下。

​ 终于，在一篇文章中发现，原来是：

​ dom元素太相似了，vue基于重复利用的原则，并没有对这部分dom元素进行重新挂载！！

​ 知道原因之后，开始尝试解决：

• 解决方案思路：在v-if的元素上添加上 :key = "xxx",用来让vue区分

1. 第一次，在v-if上绑定 动态key，问题依旧，此时的页面dom结构为：

   <template v-if=“条件”  :key="new Date()*Math.random()">
   	<………我的页面内容………/>
   </template>

   挠了挠头，排查发现（f12），最外层的这个template本身并没有生成dom元素，可能是我的key没有绑定到元素上的缘故；

2. 于是第二次尝试： 删除最外层的template标签，在下一层标签内使用v-if并绑定动态的key，成功解决！！！（激动人心，学习时刻）

   <el-row  v-if=“条件”  :key="new Date()*Math.random()">
   	页面内容
   </el-row>

问题解决

​ 对于此类v-if动态渲染的问题，vue可能会因为组件元素相似，而选择性的二次渲染，所以若需要重新渲染一个dom元素，需要给元素绑定一个独一无二的key值（主要与原本的key不同，所以可以利用动态的值），让其重新渲染；（该内容在vue官网中关于key属性的使用也有相应的说明文档）-->源码系列地址：https://vue-js.com/learn-vue/start/