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

Vue组件刷新解决方案：

• 刷新整个页面
• 使用v-if标记
• forceUpdate
• key-changing

1.刷新整个页面：体验感不好，一般不建议使用

//其中两个刷新整个页面的方法
window.location.reload();
this.$router.go(0)

2.使用v-if标记（条件渲染）

<template>
  <div>
    <span v-if="isShow"></span>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isShow: false
      }
    },
    methods: {
      setData() {
        this.isShow = !this.isShow
      }
    }
  }
</script>

3.使用内置的forceUpdate方法：组件内置$forceUpdate方法，使用前需要在配置中启用。

import Vue from 'vue'
Vue.forceUpdate()

export default {
  methods: {
    setData() {
      this.$forceUpdate()
    }
  }
}

4.使用key-changing优化组件： vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。

<template>
  <div>
    <span :key="key"></span>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        key: 0
      }
    },
    methods: {
      setData() {
        this.key += 1 
      }
    }
  }
</script>

注意:

1.如果要在组件内部中进行强制刷新

调用this.$forceUpdate()强制重新渲染组件

2.如果是刷新某个子组件

使用v-if指令的特性
使用key-changing,当组件的key 值变更时，会自动的重新渲染