当前位置：首页 > VUE

vue 实现组件刷新

2026-02-11 04:52:01VUE

强制重新渲染组件

使用 Vue 的 key 属性强制组件重新渲染。修改 key 值会触发 Vue 销毁并重新创建组件。

<template>
  <ChildComponent :key="componentKey" />
</template>

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

调用 `$forceUpdate` 方法

直接调用 Vue 实例的 $forceUpdate 方法强制更新组件。这会跳过依赖追踪直接重新渲染。

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

使用 `v-if` 控制渲染

通过 v-if 指令先销毁再重新挂载组件实现刷新效果。

vue 实现组件刷新

<template>
  <ChildComponent v-if="showComponent" />
</template>

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

利用计算属性自动更新

当依赖数据变化时，计算属性会自动更新，触发组件重新渲染。

computed: {
  computedData() {
    return this.someData + Date.now()
  }
}

使用 `provide/inject` 传递刷新方法

通过依赖注入方式向深层子组件传递刷新方法。

vue 实现组件刷新

// 父组件
provide() {
  return {
    refresh: this.refreshComponent
  }
}

// 子组件
inject: ['refresh']

事件总线触发更新

通过事件总线机制让组件响应全局事件实现刷新。

// 全局事件总线
const EventBus = new Vue()

// 发送事件
EventBus.$emit('refresh-component')

// 接收事件
EventBus.$on('refresh-component', () => {
  // 刷新逻辑
})

使用 Vuex 状态管理

通过改变 Vuex 状态触发组件更新。

// store
mutations: {
  refreshComponent(state) {
    state.refreshFlag = !state.refreshFlag
  }
}

// 组件
methods: {
  refresh() {
    this.$store.commit('refreshComponent')
  }
}