Vue中如何在不刷新浏览器页面的情况下重新加载组件？

当然有办法搞定这个需求！Vue本身没有专门的内置API一键触发组件的销毁重建，但我们可以用两个非常实用的技巧来实现，完全不用刷新页面，也不用手动去初始化各种内容～

方法1：利用v-if控制组件的挂载与卸载 #

这是最直接的方式：当v-if的值从true变为false时，Vue会彻底销毁对应的组件实例；当值变回true时，会重新创建组件并自动执行所有初始化逻辑（包括created/mounted钩子、data的初始赋值等）。

示例代码：

<!-- 父组件 -->
<template>
  <div>
    <button @click="reloadComponent">重新加载组件</button>
    <!-- 通过v-if控制子组件的生命周期 -->
    <MyComponent v-if="isComponentVisible" />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: { MyComponent },
  data() {
    return {
      isComponentVisible: true
    }
  },
  methods: {
    reloadComponent() {
      // 先把组件销毁
      this.isComponentVisible = false
      // 借助Vue的异步更新机制，确保组件彻底销毁后再重建
      this.$nextTick(() => {
        this.isComponentVisible = true
      })
    }
  }
}
</script>

方法2：通过修改组件的key属性触发重建 #

Vue的虚拟DOM diff算法会根据组件的key值来识别组件身份。当key发生变化时，Vue会判断这是一个全新的组件，于是销毁旧实例，创建新的组件实例——这样就完成了全量初始化，而且组件不会有“消失再出现”的视觉闪烁（适合不需要隐藏组件的场景）。

示例代码：

<!-- 父组件 -->
<template>
  <div>
    <button @click="reloadComponent">重新加载组件</button>
    <!-- 用动态更新的key触发组件重建 -->
    <MyComponent :key="componentKey" />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: { MyComponent },
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    reloadComponent() {
      // 修改key值，触发组件销毁重建
      this.componentKey += 1
      // 也可以用时间戳确保唯一性：this.componentKey = Date.now()
    }
  }
}
</script>

为什么$forceUpdate()和$router.go()不适用？ #

• $forceUpdate()：它只是强制Vue重新渲染组件，但不会销毁组件实例，所以组件的data初始化、created这类生命周期钩子都不会重新执行，根本满足不了你“全量初始化”的需求。
• $router.go()：这个方法操作的是浏览器的历史栈，会导致整个页面刷新，而不是仅重建目标组件，显然不符合你的场景。

内容的提问来源于stack exchange，提问作者Arnold Zahrneinder