目录
1. Vue 生命周期
1.1 生命周期四个阶段
- 创建阶段：组件初始化，数据已生成，但 DOM 未渲染
- 挂载阶段：DOM 渲染完成，页面可见
- 更新阶段：数据变化 → 视图更新
- 销毁阶段：组件卸载，清理定时器/事件监听
1.2 核心钩子（必背）
- beforeCreate：数据未初始化，无法访问 data/methods
- created：数据已创建，可发起数据请求，但无 DOM
- beforeMount：挂载前
- mounted：DOM 渲染完成，操作 DOM、请求接口、初始化插件
- beforeUpdate：数据更新，视图未更新
- updated：视图已更新
- beforeDestroy：销毁前，清理定时器、全局事件
- destroyed：销毁完成
1.3 面试标准答案
- 数据请求放在 mounted：保证 DOM 已渲染，请求完成后可直接渲染视图，避免白屏、闪烁。
- 定时器/事件监听必须在 beforeDestroy 清除，防止内存泄漏。
2. 双向绑定原理
2.1 核心实现
- Vue2：
Object.defineProperty劫持对象的 getter/setter - Vue3：
Proxy代理整个对象，支持数组、新增属性、嵌套对象
2.2 响应式流程
- 读取数据 → 触发 getter → 收集依赖（Watcher）
- 修改数据 → 触发 setter → 通知更新
- 虚拟 DOM 对比 → 局部更新视图
2.3 虚拟 DOM
- 用 JS 对象模拟真实 DOM 结构
- 优点：减少 DOM 操作、提升性能、跨平台
2.4 Diff 算法
- 对比新旧虚拟 DOM，只更新变化部分
- 同层对比、key 复用节点、最小化更新
- 面试必说：key 不能用 index，会导致节点复用错误
3. 组件通信
3.1 父子通信
- 父 → 子：props 传值
- 子 → 父：$emit 触发事件
- 最常用、最标准
3.2 兄弟/跨级通信
- eventBus：事件总线，$on / $emit
- 简单项目适用，大型项目不推荐
3.3 全局状态管理
- Vue2/Vue3：Vuex
- Vue3：Pinia（轻量化、简洁、推荐）
- 存储：用户信息、权限、全局配置、购物车、主题
3.4 深层跨级注入
- provide / inject
- 祖先组件 provide，后代组件 inject
- 适合组件库、深层跨级传递
3.5 面试总结
- 父子：props/$emit
- 全局：Vuex/Pinia
- 简单跨组件：eventBus
- 深层跨级：provide/inject
4. UniApp 优化方案
4.1 分包加载
- 小程序有2M/4M主包大小限制
- 把不常访问页面放到分包
- 主包只保留首页、tabBar、公共组件
- 大幅降低主包体积
4.2 条件编译
- 用
#ifdef %PLATFORM%区分多端代码 - 支持：微信小程序、App、H5、支付宝、抖音等
- 避免多端兼容问题
4.3 图片优化
- 图片压缩：tinyimg、webpack 压缩
- 使用 WebP 格式
- 禁止大图、原图直接上传
- 封面图使用缩略图
4.4 懒加载
- 图片懒加载
- 列表数据分页加载
- 减少首屏渲染时间
4.5 避免页面层级过深
- 页面栈最多 10 层，超过无法跳转
- 用 redirect、reLaunch 控制页面栈
- 避免无限层级跳转
4.6 其他优化
- 避免滥用自定义组件
- 减少 watch 深度监听
- 避免频繁 setData
- 骨架屏提升体验
5. Vue 高频面试扩展知识点
5.1 Vue2 与 Vue3 区别
- Vue3 使用 Proxy、Tree shaking、组合式 API、性能更强
- Vue2 使用 defineProperty，不支持自动监听数组/新增属性
5.2 计算属性 vs 侦听属性
- computed：具有缓存，依赖不变不重新计算
- watch：监听数据变化，执行异步/复杂逻辑
5.3 组件性能优化
- v-show 替代 v-if（频繁切换）
- v-for 必须带 key
- 异步组件、懒加载组件
- 冻结数据：Object.freeze()
5.4 路由守卫
- 全局守卫：beforeEach 权限控制
- 路由独享守卫
- 组件内守卫
5.5 面试必背总结
Vue 核心：响应式 + 虚拟 DOM + 组件化 UniApp 核心：一次编写多端运行 + 分包 + 条件编译 + 性能优化 面试高频：生命周期、双向绑定、组件通信、性能优化
评论区