35 道常见前端 Vue 面试题详解

Vue 内置 <transition> 组件用于处理进入、离开和列表的过渡效果。

• 核心 Class：包含 v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active, v-leave-to 六个类名，分别控制进入和离开的不同阶段。
• 自定义：可通过 enter-class, enter-active-class 等属性覆盖默认类名。
• 类型监听：设置 type 属性可指定监听 transitionend 或 animationend 事件。
• 时间控制：duration 属性可接收数字或对象 { enter: 1000, leave: 300 } 来设定时长。
• 钩子函数：支持 before-enter, enter, after-enter 等回调函数进行更精细的控制。

7. 自定义指令

自定义指令分为全局和组件级别。全局使用 Vue.directive，组件内使用 directives 选项。

钩子函数：

1. bind：指令第一次绑定到元素时调用，仅一次。
2. inserted：元素插入父节点时调用。
3. update：所在组件的 VNode 更新时调用。
4. componentUpdated：组件及其子组件的 VNode 全部更新后调用。
5. unbind：指令与元素解绑时调用。

参数说明：

• el：指令所绑定的元素。
• binding：对象，包含 name, value, oldValue, expression, arg, modifiers 等信息。
• vnode：Vue 编译生成的虚拟 DOM。
• oldVnode：上一个 VNode。

8. Vue 实现原理

Vue.js 采用数据劫持结合发布者 - 订阅者模式。通过 Object.defineProperty() 劫持属性的 setter 和 getter，在数据变动时发布消息给订阅者，触发监听回调。

具体步骤：

1. Observer：递归遍历数据对象，为所有属性添加 getter/setter，实现数据劫持。
2. Compile：解析模板指令，将变量替换为数据，初始化视图，并将指令节点绑定更新函数。
3. Watcher：作为 Observer 和 Compile 之间的桥梁。实例化时将自身添加到订阅器 (dep)，数据变动时通知自身 update() 方法，进而触发视图更新。
4. MVVM：整合三者，实现数据变化 -> 视图更新；视图交互 -> 数据变更的双向绑定。

9. Diff 算法理解

Diff 算法用于最小化 DOM 操作，避免整棵树重绘。

• 同级比较：只在同层级进行比较，不进行跨级比较。
• patch 过程：比较新旧 vnode，若相同则跳过，否则调用 patchVnode。
• patchVnode：判断节点是否指向同一对象，若是则返回；若都有文本则更新；若子节点数量不同则直接替换；若都有子节点则调用 updateChildren。
• updateChildren：通过首尾指针对比新旧子节点，处理移动、插入、删除等操作，最终更新真实 DOM。

10. 组件通信

父子组件

• Props：父传子，单向数据流。
• Events：子传父，通过 $emit 触发，父组件监听。

兄弟组件

通常通过共同父组件中转，或使用事件总线 (Event Bus)。

// 事件总线示例
import Vue from 'vue'
export const bus = new Vue()

// 发送方
bus.$emit('event-name', data)
// 接收方
bus.$on('event-name', callback)

11. Vue Router 模式及区别

• Hash 模式：URL 带 #，如 example.com/#/home。兼容性好，不会向服务器发送请求，但 URL 不够美观。
• History 模式：利用 HTML5 History API (pushState, replaceState)。URL 更美观，但需要后端配置支持，否则刷新可能报 404。

12. Vue 与 React、Angular 比较

• Vue：轻量级，关注视图层，中文文档友好，双向绑定，上手快。性能优秀，基于依赖追踪。
• React：JSX 语法，虚拟 DOM 脏检查，生态丰富，社区活跃。强调单向数据流。
• Angular：全功能框架，学习曲线陡峭，依赖注入，性能依赖脏检查，较臃肿。

13. Vue Router 钩子函数

• 全局前置：router.beforeEach((to, from, next) => {})，常用于权限校验。
• 路由独享：写在路由配置中，如 beforeEnter。
• 组件内守卫：beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave，用于组件级别的导航控制。

14. Vuex 使用

Vuex 是集中式状态管理。

• state：单一状态树，存储数据。
• getter：计算属性，过滤 state 数据。
• mutation：同步修改 state，必须提交 mutation。
• action：处理异步操作，提交 mutation。
• modules：模块化拆分，解决大型项目状态管理复杂问题。

15. Filter 过滤器

用于文本格式化。

• 全局注册：Vue.filter('name', function)。
• 局部注册：组件内的 filters 选项。
• 使用：{{ msg | filterName }} 或 :attr | filterName。
• 注意：Vue 3 已移除过滤器，推荐使用计算属性或方法替代。

16. keep-alive 缓存

<keep-alive> 包裹动态组件，使被包含组件保留状态，避免重新渲染。

• include/exclude：字符串、正则或数组，控制哪些组件被缓存。
• 生命周期：激活时触发 activated，退出时触发 deactivated。

17. 封装 Vue 组件

1. 搭建模板结构，编写样式。
2. 分析输入数据，定义 props。
3. 规划输出接口，暴露 methods 或事件。
4. 复用测试。

18. 首屏白屏优化

1. 路由懒加载：按需加载组件。
2. Gzip 压缩：开启服务端 Gzip。
3. CDN 加速：静态资源托管。
4. SSR：服务端渲染。
5. 代码分割：使用 Webpack externals 分离库文件。
6. 去除 Console：生产环境移除调试日志。
7. Loading 效果：提升用户感知。

19. v-cloak 指令

解决编译前的闪烁问题。在 Vue 实例编译结束前，隐藏带有 v-cloak 的元素。

[v-cloak] { display: none; }

20. Template 编译流程

1. Parse：将 template 编译为 AST 语法树。
2. Generate：将 AST 转化为 render 函数字符串。
3. Render：执行 render 函数生成 VNode，最终挂载到 DOM。

21. v-model 原理

表单双向绑定语法糖。

• 绑定 value 属性。
• 监听 input 事件。
• 自定义组件需配合 model 选项或 v-model 参数传递。

22. Computed 和 Watch 区别

• Computed：有缓存，依赖不变不重新计算，适合多对一的数据转换。
• Watch：无缓存，数据变化即触发，适合一对多的异步操作或大数据量处理。

23. $nextTick 使用

在下次 DOM 更新循环结束之后执行延迟回调。用于获取更新后的 DOM。

this.msg = 'new'
this.$nextTick(() => {
  // 获取更新后的 DOM
})

24. Data 为什么是函数

组件复用时，若 data 为对象，所有实例共享同一引用，导致数据污染。函数形式每次返回新对象，保证实例间数据隔离。

25. SPA 与 MPA 区别

• SPA (单页应用)：一次加载，后续路由切换不刷新页面，体验流畅，利于交互，但不利于 SEO。
• MPA (多页应用)：每次跳转刷新页面，SEO 友好，但交互体验相对割裂。

26. 常用修饰符

• .stop：阻止事件冒泡。
• .prevent：阻止默认行为。
• .capture：捕获模式。
• .self：仅触发目标元素自身事件。
• .once：只触发一次。

27. 数组更新触发视图

Vue 无法检测以下数组变化，需使用变异方法： push(), pop(), shift(), unshift(), splice(), sort(), reverse()。

28. Route 和 Router 区别

• $router：VueRouter 实例，包含全局路由方法，如 push, go, replace。
• $route：当前路由信息对象，包含路径、参数、query 等，只读。

29. 路由懒加载方式

1. 异步组件：resolve => require([...])。
2. Import 函数：const Home = () => import('@/components/home')。
3. Webpack Require：require.ensure([], () => r(require(...)))。

30. Delete 和 Vue.delete 区别

• delete：标记属性为空，不触发响应式更新。
• Vue.delete：从对象中删除属性，触发响应式更新。

31. 路由跳转与 location.href 区别

• 路由跳转：无刷新，SPA 体验，历史记录可控。
• location.href：整页刷新，浏览器原生跳转。

32. Slot 插槽用法

子组件预留 <slot> 占位，父组件传入内容填充。支持命名插槽和多插槽，增强组件灵活性。

33. Emit 相关方法

• $emit：触发自定义事件。
• $on：监听事件。
• $once：监听一次后自动移除。
• $off：移除监听器。

34. Root, Refs, Parent 使用

• $root：根实例，可作全局 Store 替代。
• $refs：非响应式引用，用于直接操作 DOM 或子组件实例。
• $parent：访问父组件实例，慎用以免增加耦合。

35. 常见问题解决

1. 样式污染：使用 scoped 或唯一 class/id。
2. Router-link 安卓失效：检查 Babel polyfill 配置。
3. 闪屏乱码：使用 v-cloak 或 display:none 配合 mounted 显示。
4. 事件无效：使用 .native 修饰符监听原生事件。