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 强制渲染组件的主要内容,如果未能解决你的问题,请参考以下文章

强制 Vue 组件重新渲染

Vue组件强制刷新的解决方案

Vue之重新渲染组件的正确方式

vue 强制刷新组件

如何在父组件中强制刷新子组件

很多人不知道可以使用这种 key 的方式来对 Vue 组件时行重新渲染