Vue3 精选面试题

你知道哪些 vue3 新特性？

answer

参考回复：

核心包比 Vue 2 更小，更好的 tree-shaking 支持，全面支持 TypeScript

setup 函数：在组件生命周期初始化时运行，用于定义响应式状态、计算属性和方法。

基于 Proxy 的新响应式系统，可以代理整个对象而不是已有属性；更好的支持数组和其他复杂数据类型；可以避免大量递归操作，性能更高

更好的 Hooks 逻辑复用

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

answer

参考回复：

父子组件通信 (props、emits)

跨层级通信 祖先组件和后代组件通信 (provide 和 inject)

灵活通信 (Mitt 事件总线、Pinia 状态管理库)

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

answer

参考回复：

通过 ref 获取组件实例

使用 useTemplateRefs 自定义名称

Vue3 中 ref 和 reactive 区别是什么？

answer

参考回复：

ref 更全面，不仅可用于基本数据类型还可用于引用数据类型。使用时需要通过 .value 访问

reactive 用于定义复杂的响应式对象（通常是对象或数组）。默认对对象的所有属性进行深度响应式处理。

建议使用 ref () 作为声明响应式状态的主要 API

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

answer

参考回复：

可以使用 Vue 3 提供的一个工具函数：toRefs

Copy
const state = reactive({
count: 0,
message: 'Hello, Vue 3!'
});
const { count, message } = toRefs(state);

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

answer

参考回复：

后端开启 CORS 允许跨域

使用 vite.config.js 配置代理；最常用

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

vue3 如何实现动态组件？

answer

参考回复：

内置特殊元素 “元组件” <component>

Copy

<component :is="view" />


vue3 中有哪些事件修饰符？

answer

参考回复：

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

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

answer

参考回复：

3.3+ 中支持的 defineOptions()

使用插件 unplugin-vue-setup-extend-plus

Copy

defineOptions({
inheritAttrs: false,
customOptions: {
/* ... */
}
})


Copy

const a = 1


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

answer

参考回复：

首先定义 ref 获取组件使用

然后在子组件使用 defineExpose() 暴露

什么是作用域插槽？

answer

参考回复：

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

Copy

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


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

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

answer

参考回复：

可以通过 <Transition> 和 <TransitionGroup> 组件来实现组件间的过渡动画。

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

answer

参考回复：

使用 :deep()

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

answer

参考回复：

通过配置

Copy
watch(
source,
(newValue, oldValue) => {
// 当 `source` 变化时，仅触发一次
},
{ once: true, immediate: true }
)

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

answer

参考回复：

主要用于 缓存组件的状态 和 避免组件被频繁销毁与重建，以优化性能。

大概原理:

keep-alive 会在内部维护一个缓存对象（cache），通过组件的 name 或 key 作为标识。

当组件被切换为不活动状态时，其实例会存入 cache，而不是销毁。

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

answer

参考回复：

通过 directives 选项注册

Copy
app.directive('focus', {
mounted(el) {
el.focus(); // 自动聚焦
},
});```

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

answer

参考回复：

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

Copy


主内容
<teleport to="body">
这是一个模态框
</teleport>



Vue3 中 Suspense 是什么？

answer

参考回复：

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

Copy


Suspense 示例
<Suspense>


<AsyncComponent />




加载中...

</Suspense>



Pinia 与 Vuex 有哪些不同？

answer

参考回复：
Pinia 相比 Vuex

更符合 Composition API 思维模式

更好的 TypeScript 类型支持

vue-router 中 params 和 query 的区别？

answer

参考回复：

如何实现路由懒加载？

answer

参考回复：

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

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

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

answer

参考回复：

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

answer

参考回复：

可以使用 .env 文件来为不同环境配置变量。常见的环境文件包括：

env：默认的环境配置（用于开发环境或没有明确环境时）。

.env.development：开发环境配置。

.env.production：生产环境配置。

.env.test：测试环境配置。

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

answer

参考回复：

父组件 beforeCreate → 父组件 created → 父组件 beforeMount → 子组件 beforeCreate → 子组件 created → 子组件 beforeMount → 子组件 mounted → 父组件 mounted

Vue 性能优化方式？

answer

参考回复：

组件懒加载

组件内缓存和 keep-alive

合理使用 computed 和 watch 减少不必要的渲染和计算

使用 v-memo 来缓存渲染结果

事件防抖与节流

压缩与优化资源

...

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

answer

参考回复：

前端捕获 401 错误并跳转到登录页

前端检测 Token 的过期时间 (exp) 判断

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

answer

参考回复：

Axios 请求、响应拦截器中处理接口权限验证和错误处理

全局错误处理（Vue.config.errorHandler）

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

Warning

按照真实项目开发描述即可。无参考回复！

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