vue3手动触发组件的重载（卸载和挂载）

vue3，手动触发一个组件的重载（卸载和挂载）

最近在做pdf在线预览需求，有一点需求是要手动刷新pdf的预览组件，所以总结了一下两种强制刷新组件的方法，亲测有效

在 Vue 3 中，通常不建议直接触发组件的重新挂载（remount），因为 Vue 的响应式系统旨在通过数据的变化来自动更新 DOM。然而，在某些特定场景下，你可能确实需要强制重新挂载一个组件。

方法 1：使用 key 属性

Vue 会根据组件的 key 属性来判断是否需要重新挂载组件。如果 key 发生变化，Vue 会销毁旧的组件实例并创建一个新的实例。

示例代码

<template>
  <div>
    <MyComponent :key="componentKey" />
    <button @click="forceRemount">Force Remount</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  setup() {
    const componentKey = ref(0);

    const forceRemount = () => {
      componentKey.value += 1;
    };

    return {
      componentKey,
      forceRemount,
    };
  },
};
</script>

方法 2：使用 v-if 控制组件的显示

另一种常见的方法是使用 v-if 指令来控制组件的显示和隐藏。当 v-if 的条件变为 false 然后再变为 true 时，组件会被销毁并重新创建。

<template>
  <div>
    <MyComponent v-if="isMounted" />
    <button @click="forceRemount">Force Remount</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  setup() {
    const isMounted = ref(true);

    const forceRemount = () => {
      isMounted.value = false;
      // 使用 nextTick 确保在 DOM 更新之后再设置为 true
      nextTick(() => {
        isMounted.value = true;
      });
    };

    return {
      isMounted,
      forceRemount,
    };
  },
};
</script>

<script setup>
import { nextTick } from 'vue';
</script>

注意: isMounted.value = false执行后，由于vue的异步更新机制，必须要在nextTick后再将isMounted设置为true，否则vue会认为isMounted的值没有变化，不会重新渲染组件。

vue异步更新机制说明：

Vue 使用了一个异步更新队列来优化性能。当状态发生变化时，Vue 不会立即重新渲染 DOM，而是将这些变化推入一个队列，并在下一个事件循环周期中统一处理这些变化。这意味着如果你在同一个事件循环中连续修改一个状态两次（例如先设为 false 再设为 true），Vue 可能只会处理最后一次的变化。