面试官问如何在 Vue 3 中实现懒加载如何恢复

在Vue 3中实现懒加载通常是指延迟加载一些非核心的组件或数据，直到它们真正需要显示给用户时才开始渲染。这有助于提高初始页面加载速度并优化用户体验。以下是实现懒加载的一种常见方法：

1. 使用动态导入（dynamic import）和异步组件（Async Component）：

// 模板中引用异步组件
<template>
  <router-view :is="viewComponent"></router-view>
</template>

<script setup>
import { ref } from 'vue';
const viewComponent = ref(null);

async function lazyLoadView(name) {
  const component = await import(`@/views/${name}.vue`);
  viewComponent.value = component.default;
}

onMounted(() => {
  // 初始化时加载首页
  lazyLoadView('Home');
})

// 当路由改变时，根据新的路由名加载对应的组件
useRouter().onBeforeRouteUpdate(to, from, next) {
  lazyLoadView(to.name);
}
</script>

在这个例子中，我们首先在模板里使用`<router-view>`标签，并通过`:is`属性让它动态加载组件。然后，在JavaScript中，我们使用`dynamic import`引入并缓存组件，只有当实际需要时才会执行。