Vue 强制渲染组件
Posted lee576
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 强制渲染组件相关的知识,希望对你有一定的参考价值。
最近自己从零撸了一个甘特图组件,如图
当切换 "月/时/日" 的时候,我希望下面的甘特图重新渲染,页面结果是这个样子
<template>
<div v-if='tasks' class="content">
<template v-for='(item, index) in tasks'>
<div :key="index + '_task'" style="border-top: 1px solid #cecece;margin:-2px 0px -1px -1px;"></div>
<div v-if='tasks' class="barRow" v-bind:style=" height: rowHeight + 'px'" :key="'task_' + index + '_' + minHeaderWidthUnit">
<bar :key= "'row_' + index + '_' + minHeaderWidthUnit" v-if='startGanttDate && endGanttDate' :startGanttDate='startGanttDate' :endGanttDate='endGanttDate' :row='item' :rowHeight='rowHeight'></bar>
<template v-for='count in timelineCellCount'>
<div class="cell" :key= "'row_' + index + '_cell_' + count" v-bind:style=" minWidth: minHeaderWidthUnit + 'px', maxWidth: minHeaderWidthUnit + 'px',height: rowHeight + 'px' "></div>
</template>
</div>
<div :key="index" style="border-top: 1px solid #cecece;margin:0px 0px 1px -1px;"></div>
</template>
</div>
</template>
我希望bar组件能重新渲染,刚开始我没有给 bar 设置 key, 我没有考虑性能问题,就单纯使用了 v-if , this.$forceUpdate() 均都无法奏效,UI 没有渲染,后来找到 一篇文章 ,他里面总结了四点,最后我更改了key,组件成功刷新了,大家可以深度学习一下Vue底层渲染机理
- 简单粗暴的方式:重新加载整个页面
- 不妥的方式:使用
v-if
- 较好的方法:使用Vue的内置
forceUpdate
方法 - 最好的方法:在组件上进行
key
更改
以上是关于Vue 强制渲染组件的主要内容,如果未能解决你的问题,请参考以下文章