Vue3 精选面试题 - 小凯同学 xkfe

你知道哪些 vue3 新特性？#

Vue 组件间通信方式有哪些？#

Vue3 如何获取组件实例？如何自定义模板引用名称？#

Vue3 中 ref 和 reactive 区别是什么？#

Vue3 如何解构响应式对象后不丢失响应式？#

如何处理 Vue3 项目中的跨域问题？#

answer

参考回复：

后端开启 CORS 允许跨域
使用 vite.config.js 配置代理；最常用

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
}

vue3 如何实现动态组件？#

vue3 中有哪些事件修饰符？#

answer

参考回复：

修饰符	作用
stop	调用 event.stopPropagation ()，阻止事件冒泡
prevent	调用 event.preventDefault ()，阻止默认事件行为（如表单提交）。
capture	使事件在捕获阶段触发，而不是冒泡阶段
self	仅当事件源为当前元素时触发事件，不会触发子元素的事件
...

Vue3 顶层 setup 下如何定义组件名称？#

answer

参考回复：

3.3+ 中支持的 defineOptions()
使用插件 unplugin-vue-setup-extend-plus

<script setup>
defineOptions({
  inheritAttrs: false,
  customOptions: {
    /* ... */
  }
})
</script>

<script lang="ts" setup name="App" inheritAttrs="false">
  const a = 1
</script>

Vue3 顶层 setup 下如何获取子组件的变量或方法？#

什么是作用域插槽？#

answer

参考回复：

允许子组件将数据或方法暴露给父组件，并在父组件中动态生成内容

<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

如何实现组件间过渡动画？#

vue3 style scoped 如何 "深度" 选择？#

Vue3 中如何实现一次性侦听和深层侦听？#

keep-alive 的具体用途及实现原理？#

如何实现一个自定义指令？#

Vue3 中的 Teleport 是什么？如何使用？#

answer

参考回复：

Teleport 允许你将组件的 DOM 渲染到组件树之外的任意位置。它解决了 Vue 组件的 DOM 层级嵌套限制问题，使得你可以将模态框、通知、工具提示等内容渲染到 HTML 文档的任意位置。

<template>
  <div>
    <h1>主内容</h1>
    <teleport to="body">
      <div class="modal">这是一个模态框</div>
    </teleport>
  </div>
</template>

Vue3 中 Suspense 是什么？#

answer

参考回复：

用于处理异步组件的加载过程。它允许你在异步任务（如数据加载或异步组件的解析）完成之前，显示一个占位内容（fallback），从而提升用户体验。

<template>
  <div>
    <h1>Suspense 示例</h1>
    <Suspense>
      <!-- 默认插槽：加载完成后显示的内容 -->
      <template #default>
        <AsyncComponent />
      </template>

      <!-- 占位插槽：加载期间显示的内容 -->
      <template #fallback>
        <p>加载中...</p>
      </template>
    </Suspense>
  </div>
</template>

Pinia 与 Vuex 有哪些不同？#

vue-router 中 params 和 query 的区别？#

如何实现路由懒加载？#

answer

参考回复：

路由懒加载是一种按需加载路由对应组件的方式，可以显著优化首屏加载时间，提高应用性能。它是通过动态导入（import ()）的方式实现的。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'), // 动态导入 Home 组件
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'), // 动态导入 About 组件
  },
];

路由 history 模式和 hash 模式区别？#

Vue 项目中如何实现多环境配置？#

说一下 Vue 子组件和父组件创建和挂载顺序？#

Vue 性能优化方式？#

如何处理后台项目的登录态过期？#

Vue 中如何统一处理接口权限验证和统一错误处理？#

从 0 到 1 自己搭建 vue3 项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织？#

此文由 Mix Space 同步更新至 xLog
原始链接为 https://kaife.cn/posts/interview/vue