面试题6：vue

Vue是一套用于构建用户界面的渐进式JavaScript框架。所谓"渐进式"，就是可以按需使用——小项目只用核心功能（数据绑定、组件），大项目再逐步加上路由（Vue Router）、状态管理（Pinia/Vuex）等扩展。

 

说一下Vue的生命周期，接口请求一般放在哪个钩子？

Vue实例从创建到销毁的过程叫生命周期，分为创建、挂载、更新、销毁四个阶段。常用钩子有：

• beforeCreate：实例刚初始化，data和methods还不可用

• created：实例创建完成，data和methods可用，一般在这里发接口请求 

• beforeMount：模板编译完成，但还没挂载到DOM

• mounted：挂载完成，可以操作DOM了

• beforeUpdate：数据变化，视图将要更新

• updated：视图更新完成

• beforeDestroy：实例销毁前，在这里清理定时器、取消事件监听

• destroyed：实例销毁完成

v-if和v-show有什么区别？

• v-if：真正地销毁或重建DOM元素，切换开销大

• v-show：只是用CSS的 display:none 控制显隐，切换开销小

• 用 v-show 的场景（高频切换）：

  • Tab页签切换、下拉菜单展开/收起、侧边栏折叠。

  • 原因：用户来回点，如果用 v-if，每次点击都在销毁和创建DOM，页面会卡顿甚至闪烁。

• 用 v-if 的场景（条件很少改变 / 权限控制）：

  • 用户权限（比如“管理员才显示的删除按钮”，普通用户压根不需要加载这个按钮）。

  • 弹窗（Modal）中的表单（敲黑板！这是高频加分点）。

  • 加分回答：“如果弹窗里有表单，用 v-if 比 v-show 好。因为用 v-if，关闭弹窗时表单DOM被销毁，下次打开会自动重置表单数据；如果用 v-show，表单数据还残留在内存里，你必须手动调用 resetFields() 去清空，非常麻烦。”（面试官听到这个绝对会点头）

怎么把一个组件嵌入到另一个组件？（组件注册与使用）

在 Vue 中这叫 父子组件通信的第一步——注册和使用。实际开发中 99% 都是用“局部注册”。

实操步骤（以 Vue2 为例，Vue3同理）：

假设你要把 Child.vue 嵌入到 Parent.vue 中。

第一步：在父组件中导入（import）
第二步：在 components 选项中注册
第三步：在模板中以标签形式使用

Vue组件之间怎么通信？

主要分几种情况：

1. 父子组件通信：父传子用 props，子传父用 $emit 触发事件

2. 兄弟组件通信：通过共同的父组件中转，或者用 EventBus

3. 跨层级通信：用 provide / inject，或者用 Vuex / Pinia 状态管理