Vue 强制渲染组件

Posted 2022-03-04 lee576

最近自己从零撸了一个甘特图组件，如图

 当切换 "月/时/日" 的时候，我希望下面的甘特图重新渲染，页面结果是这个样子

<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 更改