vue实现组件刷新

强制重新渲染组件

使用 this.$forceUpdate() 方法可以强制 Vue 实例重新渲染，但不会更新子组件。适用于依赖非响应式数据的情况。

methods: {
  refreshComponent() {
    this.$forceUpdate();
  }
}

通过 v-if 控制显隐

利用 v-if 指令的销毁和重建机制实现组件刷新。通过切换布尔值强制组件重新初始化。

<template>
  <child-component v-if="showComponent" />
</template>

<script>
export default {
  data() {
    return {
      showComponent: true
    }
  },
  methods: {
    refreshComponent() {
      this.showComponent = false;
      this.$nextTick(() => {
        this.showComponent = true;
      });
    }
  }
}
</script>

修改 key 属性

通过改变组件的 key 属性值触发 Vue 的重新渲染机制。推荐用于需要完全重置组件状态的场景。

<template>
  <child-component :key="componentKey" />
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    refreshComponent() {
      this.componentKey += 1;
    }
  }
}
</script>

使用 provide/inject 传递刷新函数

通过依赖注入方式实现跨层级组件刷新，适用于深层嵌套组件场景。

// 父组件
export default {
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      this.componentKey += 1;
    }
  }
}

// 子组件
export default {
  inject: ['reload'],
  methods: {
    handleRefresh() {
      this.reload();
    }
  }
}

事件总线触发刷新

通过 Vue 实例作为事件总线实现非父子组件间的刷新通信。

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 组件A
EventBus.$emit('refresh-component');

// 组件B
EventBus.$on('refresh-component', () => {
  this.componentKey += 1;
});

使用 Vue.observable 管理状态

通过响应式对象共享状态，配合计算属性实现条件刷新。

// store.js
import Vue from 'vue';
export const store = Vue.observable({
  refreshFlag: false
});

// 组件
export default {
  computed: {
    refreshTrigger() {
      return store.refreshFlag;
    }
  },
  watch: {
    refreshTrigger() {
      this.internalRefresh();
    }
  },
  methods: {
    requestRefresh() {
      store.refreshFlag = !store.refreshFlag;
    }
  }
}

路由原地跳转刷新

对于路由组件，可通过 router.push 重定向到相同路由实现刷新。

this.$router.push({
  path: '/same-path',
  query: {
    t: +new Date() // 时间戳保证每次不同
  }
})

每种方法适用于不同场景，v-if 和 key 修改适合局部组件刷新，事件总线适合跨组件通信，路由跳转适合页面级刷新。根据实际需求选择最合适的实现方式。