Vue组件重新渲染(强制刷新)的方案

1.刷新整个页面

2. 使用v-if

3.使用this.$forceUpdate()方法

4.使用key-changing优化组件

1===>

• this.$router.replace
• window.reload()
• router.go(0)

2===>
不做解释

3===>
vue 组件强制刷新
场景：echarts组件不能及时刷新，组件内容不显示，代码改变后显示。

this.$forceUpdate()

4===>
给需要刷新的内容绑定一个key
场景：数据更新后表格错位，重新加载后才恢复原样。

        <el-table
            :data="list"
            :span-method="objectSpanMethod"
            border
            height="380"
            style="width: 100%;"
            :key="key"
        >
        .......................
        </el-table>

props: {
        thead: {
            type: Array,
            default: () => []
        },
    },
    watch:{
      thead(){
          this.key += 1 
      }
    },
    data() {
        return {
            key:0
        }
    },

参考