当前位置：首页 > news >正文

前端八股文-vue篇

news 2025/6/14 7:00:28

Vue 核心概念

1. Vue 的生命周期钩子函数有哪些？

Vue 组件生命周期主要分为 8 个阶段：

创建阶段：
- beforeCreate：实例刚创建，data 和 methods 还未初始化
- created：实例创建完成，data 和 methods 已初始化，但 DOM 未挂载
挂载阶段：
- beforeMount：模板编译完成，但未挂载到页面
- mounted：实例已挂载到 DOM，可以访问 DOM 元素
更新阶段：
- beforeUpdate：数据更新时触发，DOM 未重新渲染
- updated：数据更新完成，DOM 已重新渲染
销毁阶段：
- beforeDestroy：实例销毁前，仍可访问实例
- destroyed：实例已销毁，所有绑定和监听被移除

2. Vue 的双向数据绑定原理是什么？

Vue 使用 数据劫持 + 发布订阅模式 实现双向绑定，核心是通过 Object.defineProperty()（Vue 2.x）或 Proxy（Vue 3.x）来劫持各个属性的 setter 和 getter：

Observer：递归遍历 data 对象，使用 Object.defineProperty 设置 getter/setter
Dep：每个属性都有一个 Dep 实例，用于收集依赖（Watcher）
Watcher：作为 Observer 和 Compile 的桥梁，当数据变化时触发回调
Compile：解析模板指令，初始化视图，并订阅数据变化

Vue 3.x 改用 Proxy 实现，优势在于：

可以直接监听对象而非属性
可以直接监听数组变化
有更多拦截方法（13种）
性能更好

3. computed 和 watch 的区别是什么？

computed：

是计算属性，基于依赖的响应式数据进行缓存
只有依赖的数据发生变化才会重新计算
必须有 return 语句
适合复杂逻辑计算

watch：

是监听器，监听特定数据的变化
无缓存性，每次变化都会执行
可以执行异步操作
适合数据变化时执行异步或开销较大的操作

4. Vue 组件通信方式有哪些？

父子组件通信：
- props / $emit
- $parent / $children（不推荐）
- ref 获取组件实例
兄弟组件通信：
- 通过共同的父组件中转
- 事件总线（Event Bus）
- Vuex
跨级组件通信：
- provide / inject
- $attrs / $listeners（Vue 2.x）
- Vuex
全局通信：
- Vuex 状态管理
- Event Bus
- 全局事件总线

Vue 进阶知识

5. Vue 的 nextTick 原理是什么？

nextTick 是 Vue 提供的异步延迟执行方法，其原理是：

Vue 在更新 DOM 时是异步执行的，数据变化后不会立即更新 DOM
使用微任务（microtask）优先策略：
- 优先使用 Promise.then
- 降级使用 MutationObserver
- 再降级使用 setImmediate
- 最后使用 setTimeout

使用场景：

在数据变化后操作依赖于新 DOM 结构的代码
在 created 生命周期中操作 DOM

6. Vue 的虚拟 DOM 和 diff 算法

虚拟 DOM：

是用 JavaScript 对象描述真实 DOM 的抽象
通过比较新旧虚拟 DOM 的差异，最小化 DOM 操作

diff 算法：

同级比较，不跨级比较
比较标签名和 key 值
双端比较策略（Vue 2.x）：
- 新旧节点的首尾各有一个指针，共4种比较方式
- 如果都没匹配到，则用新节点的 key 在旧节点中查找
最长递增子序列优化（Vue 3.x）

7. Vue 3 的新特性有哪些？

Composition API：
- setup() 函数
- ref 和 reactive 响应式API
- 更好的逻辑复用
性能提升：
- 使用 Proxy 代替 Object.defineProperty
- 更高效的虚拟 DOM
- 更好的 Tree-shaking 支持
新特性：
- Fragment（多根节点组件）
- Teleport（传送门）
- Suspense（异步组件）
- 自定义渲染器 API
TypeScript 支持：
- 完全使用 TypeScript 重写
- 更好的类型推断

8. Vuex 的核心概念是什么？

Vuex 是 Vue 的状态管理库，核心概念包括：

State：存储应用状态数据
Getter：从 state 派生的计算属性
Mutation：唯一修改 state 的方法，同步操作
Action：提交 mutation，可以包含异步操作
Module：将 store 分割成模块

工作流程：
组件 → dispatch Action → commit Mutation → mutate State → 更新视图

Vue 实战问题

9. Vue 的性能优化手段有哪些？

编码阶段：
- 合理使用 v-if 和 v-show
- 合理使用 computed 和 watch
- v-for 必须加 key，避免与 v-if 一起使用
- 组件懒加载
- 防抖节流
打包优化：
- 按需引入组件库
- 使用 CDN 加载第三方资源
- 开启 gzip 压缩
- 使用 Tree-shaking 移除无用代码
运行时优化：
- 使用 keep-alive 缓存组件
- 使用 v-once 和 v-memo（Vue 3）
- 长列表虚拟滚动
- 避免大数据响应式

10. Vue Router 的导航守卫有哪些？

全局守卫：
- beforeEach：路由进入前
- beforeResolve：路由解析前
- afterEach：路由进入后
路由独享守卫：
- beforeEnter：特定路由进入前
组件内守卫：
- beforeRouteEnter：进入组件前（无法访问 this）
- beforeRouteUpdate：路由改变但组件复用时
- beforeRouteLeave：离开组件前

执行顺序：beforeRouteLeave → beforeEach → beforeEnter → beforeRouteEnter → beforeResolve → afterEach

11. 什么是 Vue 的 mixin？有什么优缺点？

mixin 是一种分发 Vue 组件可复用功能的灵活方式，可以包含任意组件选项。

优点：

代码复用
逻辑解耦
维护方便

缺点：

命名冲突
来源不明确
多个 mixin 可能导致复杂度增加

Vue 3 推荐使用 Composition API 替代 mixin。

12. Vue 的响应式原理中数组的处理方式

Vue 2.x 中对数组的特殊处理：

重写了数组的 7 个方法：
- push, pop, shift, unshift, splice, sort, reverse
这些方法被重写后，除了执行原生操作外，还会触发视图更新
直接通过索引修改数组项或修改数组长度不会触发响应式：
```
this.items[0] = newValue // 不会触发更新
this.items.length = 0 // 不会触发更新
```
需要使用 Vue.set 或数组的 splice 方法