面试官问vue2和vue3的区别

Vue 3相对于Vue 2的主要区别如下：

1. 性能优化：Vue 3引入了一些新的响应式系统，以及编译器优化，可以带来更快的渲染速度和更小的包体积。

2. 更好的类型支持：Vue 3使用TypeScript作为开发语言，并引入了一些新的类型定义，使得开发过程中更加顺畅和安全。

3. 组合式API：Vue 3引入了组合式API，使得开发者可以更好地组织代码逻辑，并且提高代码的可复用性和可维护性。

4. Teleport组件：Vue 3中新增了Teleport组件，可以更方便地在DOM树中移动元素，使得Portal和Modal等组件的实现更加简单。

5. 其他改进：Vue 3还引入了Suspense组件、Fragment组件等新特性，以及对v-model、v-if等指令的改进等。

需要注意的是，Vue 3的一些新特性可能与Vue 2不兼容，因此在进行迁移时需要仔细考虑。

相关问题

面试官问vue平常封装过哪些组件

我平常在Vue中封装过一些常用的组件，例如：

1. 按钮组件（Button）：可以根据不同的样式和功能需求，封装不同类型的按钮，例如普通按钮、主要按钮、次要按钮等。

2. 模态框组件（Modal）：用于展示弹出窗口，可以根据需要设置标题、内容和按钮等。

3. 表单组件（Form）：可以封装常用的表单元素，例如输入框、下拉选择框、单选框、多选框等，以及表单验证的逻辑。

4. 列表组件（List）：用于展示数据列表，可以支持分页、排序和过滤等功能。

5. 菜单组件（Menu）：用于创建导航菜单，可以支持多级菜单和动态生成菜单项等。

6. 图表组件（Chart）：可以使用第三方图表库，封装成Vue组件，用于展示各种类型的图表数据。

这只是一些常见的组件封装示例，实际上，根据项目需求，可能还会封装其他类型的组件。

面试官问如何在 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`引入并缓存组件，只有当实际需要时才会执行。