刚开始做技术分享的时候有个朋友让我用一句话说清 Vue2 到底在干什么。我想了想说把数据变成页面再把页面上的操作换算回数据。听起来挺简单可真要搞清楚里面每一步是怎么串起来的很多人翻过车。尤其是现在 Vue3 都稳定好几年了面试还是动不动就问 Vue2 的源码级原理存量项目也还全是 Vue2所以这套老知识不但没过时反而是最能帮你“撑场面”的东西。这篇内容我想把 Vue2 的核心知识点完整串一遍不做特别多虚的“思想总结”而是把响应式、组件通信、生命周期、指令、Vuex、路由这些主干知识讲透并且把平时大家搜索最多的高频问题——比如 keep-alive 内存泄漏、打包体积怎么看、echarts/three.js 怎么集成、Vue2 和 Vue3 到底差在哪——也一并带出来。适合两类人一是正在维护 Vue2 旧项目、被各种历史代码折磨的前端同学二是准备面试想临时把 Vue2 知识体系补完整的人。放心不会太长篇大论讲源码但核心原理我会尽量说人话。1. 先搭知识骨架Vue2 的设计主线学习 Vue2 最忌讳一上来就钻到 API 细节里。按照我自己的经验先把它的骨架立住之后所有知识点都能挂到骨架上面。Vue2 的设计主线其实只有三条数据驱动、组件化、模板编译。1.1 三条主线怎么理解第一是数据驱动。你只需要维护一份 JavaScript 对象也就是 data页面会跟着这份数据自动变。click 事件、input 事件、网络请求返回最后都会落到“改数据”这个动作上剩下的 DOM 操作交给 Vue 内部去处理。这就是“状态驱动视图”的含义。第二是组件化。页面不是一个整体而是一棵组件树。每个组件有自己独立的模板、数据、行为组件之间可以嵌套也可以互相传值。这样做的最大好处是复用和隔离公共逻辑抽成组件业务页面由组件拼装单个文件内部再复杂也不会让整个项目失控。第三是模板编译。你写的 template 其实浏览器不认识Vue 编译器会把它编译成 render 函数执行 render 函数会得到虚拟 DOM也就是一个描述页面结构的 JavaScript 对象最后再由虚拟 DOM 生成真实 DOM。这一步对新手来说比较抽象你可以把它理解成“设计师画了一张图纸施工队按图纸盖房子”代码里的 vnode 就是那张图纸。1.2 虚拟 DOM 解决了什么问题很多初学者会产生一个疑问既然数据驱动最终要操作真实 DOM为什么不直接改 DOM非要中间加一层虚拟 DOM这个问题当年我在学 Vue 时也纠结过。直接操作真实 DOM 本身没问题问题是当页面复杂、状态很多时你很难高效地判断“到底哪一块 DOM 需要更新”。频繁、盲目的真实 DOM 操作会带来性能问题还容易让代码变得混乱。虚拟 DOM 的价值就在于当数据变化时Vue 会先生成一份新的虚拟 DOM 树然后和旧的虚拟 DOM 树做对比也就是 diff找出“哪里变化了”再把这个最小差异批量更新到真实 DOM 上。这个“先算后改”的思路既能保证数据驱动又能把真实 DOM 操作的次数压到最低性能和可维护性都保住了。我见过不少同学把 Vue2 学成“模板语法大全”这个组件的 prop 会了那个指令不会就去搜一下结果项目做着没问题面试一问原理就卡壳。这就是因为大脑里没有骨架知识点全是散落的。先把三条主线记清楚后面所有内容其实都是这三条线在不同层面的延伸。2. 响应式系统Vue2 的灵魂如果只挑一个知识点深入学习 Vue2我一定推荐响应式系统。这是 Vue2 最核心也最容易出题的环节。把这里弄明白你会顺带理解为什么 Vue2 对数组有特殊处理、为什么修改数据后 DOM 不会立刻更新、为什么要用 Vue.set。2.1 Object.defineProperty 是如何劫持数据的Vue2 的响应式基础是Object.defineProperty它可以在读取对象属性或给属性赋值时插入一段自定义逻辑。Vue 初始化 data 时会遍历 data 里的所有属性把它们变成 getter 和 setter 的形式。let value 100 const obj {} Object.defineProperty(obj, count, { get() { console.log(读取 count 了) return value }, set(newValue) { console.log(count 被修改了) value newValue } })这段代码演示了最基础的“劫持”。Vue 在 get 里做依赖收集在 set 里触发更新。你在模板中一旦用到某个属性就会触发 getVue 就知道“这个视图依赖了这个数据”后续给属性赋值时触发 setVue 就知道“数据变了要把依赖这个数据的视图更新一下”。很多面试题会追问为什么 Vue3 改用 Proxy一个很直接的原因就是 Object.defineProperty 的局限——它一次只能劫持一个属性必须递归遍历整个对象才能完成深度监听如果属性是新增的初始化时根本劫持不到后续改动自然无法触发更新。2.2 依赖收集与派发更新的完整链路光知道 getter 和 setter 还不够依赖收集的过程才是真正体现设计精巧的地方。Vue 内部有几个角色Observer 负责把数据变成响应式Dep 是依赖管理器可以理解为“一个订阅中心”Watcher 是订阅者组件要更新就靠它。数据初始化时Observer 把每个属性都转成 getter/setter给每个属性创建一个 Dep。组件渲染时会执行 render 函数期间会读取模板中用到的数据触发 get此时当前组件的 Watcher 就会被收集到对应的 Dep 里。当数据发生变化时触发 setDep 通知所有收集到的 Watcher 执行更新最终重新渲染组件。这个链路串起来Vue 就实现了“精确更新”哪个组件的模板用到了变化的属性哪个组件才更新其他组件完全不受影响。我在实际项目中调试过一个表格页某个弹窗里的表单数据一变整页都在闪烁最后定位到原因是把弹窗状态放在了父组件而这个父组件模板里引用了大量数据。解决方式就是把弹窗拆成独立组件让它单独维护自己的 reactive 状态更新范围立刻变小。2.3 对象新增属性和数组索引的坑Vue2 的常见坑基本都集中在响应式检测不到数据变化上。第一类坑是给响应式对象“新增”一个属性this.user { name: Tom, age: 20 } // 直接新增属性视图不会更新 this.user.gender male原因是初始化时并没有给 gender 属性做 getter/setter 劫持后面加进去完全不受 Vue 管理。正确做法是用this.$set(this.user, gender, male)或者初始化时就预留好这个字段哪怕给的默认值是 null 也行。第二类坑是通过数组下标修改数组项。this.arr[0] new value不会触发更新因为 Vue 对数组的监听是靠重写数组方法实现的push、pop、shift、unshift、splice、sort、reverse 这些方法会被拦截。想让下标改值也响应依然要用$set或者splice替换。这里我的建议是项目中约定所有需要展示的数据都在 data 里先声明完整结构即使某些字段暂时没值也先写 null。宁可多几个空字段也不要等接口返回后再临时新增属性否则迟早遇到“数据变了画面没反应”的诡异问题。2.4 nextTick 与异步更新队列还有一个小知识点经常被忽略那就是 Vue 的更新是异步的。当你把this.msg new value写出后DOM 不会立刻变化Vue 会把同一轮事件循环里的所有数据变化收集起来放到一个更新队列里最后一次性更新 DOM。这样做的好处是避免重复渲染浪费性能。所以如果你紧接着读取 DOM 结构拿到的还是旧值。正确姿势是用this.$nextTick(() { ... })在回调里操作更新后的 DOM。面试如果问这个最好能说出它内部的回调会被放在微任务队列里而且会做兼容处理优先使用 Promise。我一直跟团队里的小朋友说响应式原理理解了你就拿到了 Vue2 这把锁的主钥匙。后面的模板语法、组件通信、生命周期都会频繁和这个机制发生关联。比如 created 里请求接口、mounted 里操作 DOM、beforeDestroy 里清理监听这些“什么阶段做什么事”的背后都是因为响应式系统和生命周期互相配合。3. 组件体系通信、生命周期与复用组件是 Vue2 最常用的功能也是项目里最容易写出“屎山”的地方。组件写得好不好直接影响后续维护成本。这一章我把组件通信、生命周期、复用手段和它们背后的适用场景讲清楚。3.1 父子组件通信的常规操作父子通信最常见的方案是 props 向下传数据、$emit 向上抛事件。这里有一个容易被忽略的要点props 只能从父到子单向流动子组件不应该直接修改 props。如果你在子组件里给 prop 重新赋值Vue 在开发环境会报出警告而且在严格模式下行为很不可控。如果子组件真的要根据 props 做内部调整正确做法是要么把 props 作为初始值复制到 data 里要么用 computed 基于 props 计算派生值。比如父组件传一个visible来控制弹窗显隐子组件内部想临时改一个显示状态就直接维护自己的innerVisible通过 watch 同步 props 的变化而不是硬改 props。// 子组件 export default { props: { visible: { type: Boolean, default: false } }, data() { return { innerVisible: this.visible } }, watch: { visible(val) { this.innerVisible val } } }这种“props 作为输入、内部 state 作为输出”的模式在复杂组件里非常实用。3.2 跨层级通信与依赖注入跨多级组件通信常用provide / inject这组 API 允许祖先组件提供一个值后代组件直接注入使用不需要一层层 props 传递。比较典型的场景是配置类数据比如某个业务组件库里最外层的 Container 提供了全局的尺寸配置里面任意层级的子组件都可以直接 inject 使用。不过要提醒一句provide 在 Vue2 默认不是响应式的。你提供的是一个普通对象子组件拿到后一旦源头的值变化子组件不会自动更新。如果需要响应式得自己把值包成响应式数据比如在 data 里定义再用 provide 传 this 上的属性这在部分情况下能间接做到响应式。除了 provide/inject还有$refs可以直接拿到组件实例、$parent/$children 可以访问父子实例。$refs 在需要调用子组件方法时非常方便比如表单页里在父组件调用子组件的 validate 方法做校验。$parent 和 $children 我第一次看文档觉得挺有用实际项目里用得非常少因为它破坏了组件封装组件之间直接耦合代码一动就碎。能不用尽量不用。3.3 事件总线与全局状态的选择当两个毫无嵌套关系的组件需要通信比如侧边栏点了一下顶栏要联动事件总线是 Vue2 的经典方案。实现很简单导出一个 Vue 实例// event-bus.js import Vue from vue export default new Vue() // A 组件 import bus from /utils/event-bus bus.$on(menu-toggle, () { ... }) // B 组件 import bus from /utils/event-bus bus.$emit(menu-toggle)但是事件总线有一个明显的坑事件满天飞项目大了之后你根本找不到谁触发谁监听排查问题非常痛苦。而且如果组件销毁后没有及时$off解绑还容易造成回调函数一直持有组件引用引发内存泄漏。所以小范围用一用可以大规模项目我更推荐直接上 Vuex虽然代码多一点但数据流向清晰调试有日志长期维护舒服得多。用表格整理一下组件通信方式的优缺点通信方式适合场景注意点props / $emit父子直接通信props 单向流不要直接修改$refs父组件调用子组件方法要等子组件 mounted 后才能拿实例provide / inject祖先给后代提供共享数据默认非响应式需自己处理事件总线任意组件间通信需手动销毁监听慎用Vuex全局共享状态适合大型项目数据流清晰3.4 生命周期什么阶段干什么事生命周期是 Vue2 组件化开发里的“时间表”。这里我不按文档顺序背而是按实际开发时每个钩子最常用的场景来讲。created 阶段data 已经初始化完成可以访问数据也可以在这里发请求初始化页面数据。很多人问 created 和 mounted 有什么区别最核心的区别是created 时模板还没渲染你拿不到真实 DOMmounted 时组件渲染完成可以操作 DOM。所以计算 DOM 尺寸、绑定第三方插件等操作必须等 mounted。beforeDestroy / destroyed 这两个钩子一定不能浪费。前面提到的定时器、事件监听、resize 回调、koa 这类全局监听所有手动绑定的东西都要在 beforeDestroy 里销毁。我曾经遇到过一个性能问题页面切来切去越来越卡最后发现是每个组件在 mounted 里监听了 window resize组件销毁时没解除监听器越积越多。检查一堆代码后才发现就是因为少写了一句 removeEventListener。beforeRouteEnter 属于路由组件独有钩子适合在进入路由前做权限校验或者提前请求数据。它有一点特殊此时组件实例还没创建拿不到 this但可以在回调里拿到实例使用 next(vm { ... })。3.5 mixin、自定义指令与逻辑复用组件复用的另一个维度是逻辑复用。Vue2 里的 mixin 可以把逻辑抽离成可复用的配置对象混入到多个组件里。比如多个列表页都需要分页参数、请求方法、重置方法就可以抽成一个 paginationMixin。但 mixin 的问题也很明显命名冲突。多个 mixin 里有相同的 data 字段或者组件自己的字段和 mixin 重复最终谁生效靠合并规则决定很难一眼看出来。数据来源不清晰维护成本高。Vue3 的 Composition API 之所以火很大程度就是因为把这种黑盒混入改成了显式的函数调用。自定义指令适合复用 DOM 操作类逻辑。比如 v-focus 自动聚焦、v-permission 根据权限控制按钮显隐、v-debounce 做输入防抖。写过一次就可以全项目通用。自定义指令的生命周期比较重要bind绑定、inserted插入、update更新、unbind解绑。操作 DOM 的放在 inserted卸载时清理监听的放在 unbind。组件通信和逻辑复用是整个 Vue2 项目架构的地基。新手容易过度使用 $refs 或事件总线折腾一把梭等代码量涨起来简直想哭。反过来把所有通信都收敛到 props 和 Vuex虽然一开始代码看起来“啰嗦”但三个月后再回来看你会感谢当初的自己。4. 模板、指令与数据展示的最佳实践模板语法是大多数人接受 Vue 的第一印象也是实际开发中每天都要写的东西。这里我不打算把文档里的指令都念一遍而是挑出那些容易写错、面试常问、实战高频的细节展开。4.1 v-model 的本质与组件定制v-model 在 Vue2 中是语法糖。用在 input 上它等于绑定 value 监听 input 事件用在组件上默认等于绑定 propvalue 监听input事件。理解了这个本质你在封装表单组件时会非常从容。如果你想改默认行为可以在组件里定义 model 选项Vue.component(custom-input, { model: { prop: checkedValue, event: change }, props: { checkedValue: Boolean } })这样父组件写v-modelisCheck实际传给子组件的是 checkedValue监听的则是 change 事件。很多二次封装组件库的开发者会用到这个特性。v-model 还有一些修饰符很实用。.number可以把输入值转成数字.trim可以自动去首尾空格.lazy可以让数据同步从 input 事件改成 change 事件也就是输入框失去焦点时才同步。别小看这几个修饰符真实业务中很多“类型不对”的 bug 都是因为忽略了 number 转换。4.2 计算属性、侦听器与方法的选择这是非常经典的面试考点也是很多人写代码时容易混淆的地方。简单说方法methods每次调用都会执行没有缓存计算属性computed有缓存只有依赖的响应式数据变化时才重新计算。计算属性最适合做“根据已有数据派生出新数据”的场景比如全选状态、购物车总价、过滤后的列表。由于有缓存即便模板里多处引用同一个计算属性也只会计算一次。侦听器watch适合处理“当某数据变化后需要做异步操作或较大开销的操作”的场景。比如监听搜索关键字变化然后防抖请求接口监听路由变化重新加载数据。我踩过一个坑初学者喜欢把列表过滤逻辑写进 method然后模板里调用filterList()结果每次渲染都重新跑一遍过滤数据量大时明显卡顿。换成 computed 之后只有依赖数据变化才重新计算页面瞬间流畅了。建议大家在写任何派生数据前想一下这里到底要不要每次执行如果不需要优先选择 computed。4.3 指令的细节与事件修饰符v-if 和 v-show 的区别也是老生常谈但真到项目里依然有人乱用。v-show 是切换 display元素始终都在 DOM 里v-if 是真正的条件创建和销毁。频繁切换的场景用 v-show比如 Tab 切换条件很少变化、对初始渲染性能有要求的场景用 v-if这样不满足条件时连 DOM 都不会创建。v-for 渲染列表时必须绑定 key。key 的作用是帮助 diff 算法识别哪些元素有变化。这里我有一个经验key 不要用数组下标除非你完全不做排序和增删。用下标做 key一旦列表顺序变化Vue 复用的是旧状态容易出现输入框内容错乱等问题。更好的选择是使用数据中稳定唯一的 id。事件修饰符是 Vue2 里很容易提升效率的小工具。.stop阻止冒泡.prevent阻止默认行为.once只触发一次.capture使用捕获模式.self只在事件目标是自己时触发还有按键修饰符.enter、.esc等。以前用 jQuery 写e.stopPropagation()现在直接在模板上写明意图代码可读性高很多。4.4 插槽从默认插槽到作用域插槽插槽是组件复用里非常灵活的一环。默认插槽就是子组件里留一个空位由父组件填充具名插槽可以指定往哪一个空位里填充内容作用域插槽则更进一步让子组件把数据通过插槽抛给父组件结构使用。Vue2.6 之后推荐使用 v-slot 语法老版本还在用的 slot、slot-scope 建议逐步迁移。封装数据表格组件的时候作用域插槽是最常用的扩展方式子组件负责渲染表格框架父组件通过作用域插槽注入每一行的自定义列内容比如状态标签、操作按钮。这样表格组件既保持高复用性又保留了充分的定制能力。这里我见过一个常见毛病为了图省事把所有插槽内容都堆进默认插槽结果页面看起来是一个超大的template块父组件模板的可读性很差。建议凡是功能区域明显的都用具名插槽比如 header、footer、row-actions后期定位问题快得多。5. 状态管理 Vuex 与路由 Vue RouterVue2 项目大了之后组件通信会变复杂路由也会多到让人头大。这两个生态库是 Vue2 实战的必选项。这里我讲核心概念和多数组件库方案背后的通盘思路。5.1 Vuex 的核心数据流Vuex 的核心概念是单一数据源。所有需要共享的数据放在 state 里需要修改数据时由 commit mutation 来同步修改异步操作则放到 actions 里由 action commit mutation。严格模式下外部不能直接修改 state这是 Vuex 设计的关键。mutation 必须是同步函数因为开发工具需要在同一时刻捕获状态变化如果 mutation 里做异步请求时序会变得不可预测调试就废了。虽然 actions 也是写 async / Promise但它只负责发起异步请求最终改数据还是同步的 mutation。我第一次接触 Vuex 时觉得绕后来想了想其实它就相当于一个“中央仓库”所有组件都往仓库进货读取 state发货commit mutation必须走统一的单据。这套约束在大型项目里能救命因为数据改动的痕迹变得可追踪你可以打开 Vue DevTools 看到每次 mutation 的变更记录比自己脑补数据流强太多。5.2 辅助函数与模块化当组件里需要用到 store 里的很多状态时一个个写this.$store.state.xxx非常啰嗦于是就有了 mapState、mapGetters、mapMutations、mapActions 这些辅助函数。它们最大的作用是简化模板和逻辑中的引用import { mapState, mapMutations } from vuex export default { computed: { ...mapState([userInfo, permissions]), ...mapGetters([isLogin]) }, methods: { ...mapMutations([SET_USER]) } }注意 mapState 要放在 computed 里mapMutations 要放在 methods 里这样页面里就能直接用 this.userInfo、this.SET_USER 了看着像组件自身属性实际上是 store 的映射。模块多了之后要使用 namespaced 给每个模块加命名空间。加了这个之后mapState、mapMutations 第一个参数传模块名比如...mapState(user, [info])。我建议从一开始就开启 namespaced哪怕模块就几个避免后面模块数量上来后同名 mutation 互相干扰。5.3 路由模式与路由守卫Vue Router 最常见的问题就是面试问 hash 和 history 模式的区别。hash 模式用 URL 的 # 号路径刷新页面不会丢失因为 # 后面的内容不会发送给服务器适合静态部署history 模式用 HTML5 History API路径更美观但刷新页面时服务器必须配置好 fallback把不存在的路径都指向 index.html否则会 404。路由守卫是权限控制的关键位置。全局前置守卫router.beforeEach适合统一做登录校验比如判断有没有 token没有就跳转到登录页。路由独享守卫beforeEnter适合对特定页面做权限校验。组件内守卫beforeRouteEnter则可以读取当前路由参数提前请求数据。动态菜单和按钮权限是后台管理系统的高频需求思路通常是用户登录成功后后端返回该用户的权限码和菜单列表前端把菜单配置映射成路由通过 router.addRoutes 动态注册按钮权限则用自定义指令或函数判断。我实际做过一个中台系统后端返回的菜单树带着前端组件的路径映射表前端先注册静态路由登录页、404、首页再根据权限列表动态拼接路由并 addRoutes。这个方案比较主流需要注意的是addRoutes 之后一定要用 next({ ...to, replace: true }) 重新进入一次避免刷新白屏。6. 实战高频场景脚手架、打包、性能与调试前边的内容更偏“原理和概念”这一部分我把大家真实工作中遇到最多的场景集中回答一下。你会发现这些问题其实考察的还是前面的知识只是换了一层业务外衣。6.1 从 Vue CLI 到 HBuilderX项目搭建方式Node 生态下的 Vue2 项目最常见的是 Vue CLI 3/4 创建的模板基于 webpack 4。你只需要运行vue create project-name预设选 sass / router / vuex就能得到一个基础工程。Vue CLI 封装了 webpack 配置日常开发用npm run serve启动、npm run build打包就行。如果你想知道打包的细节和体积问题下面会详细说。另一类很常见的场景是用 HBuilderX 做 Vue2 项目尤其是 uni-app 生态。uni-app 底层在 Vue2 上运行时开发体验和常规 Vue CLI 项目差别不大同样支持 Vue2 的核心语法但它引入了 pages.json、manifest.json 这类配置文件数据请求推荐封装成 uni.request。如果你已经会用 Vue2 写网页转到 uni-app 时不要被配置文件吓到核心的 v-model、组件、生命周期、computed 都是一模一样的。如果你做的是纯桌面 Web 管理系统我用 Vue CLI 会更多一些如果目标是 App 或小程序多端发布HBuilderX 开 uni-app 就是更省精力的选择。两条路线都要会因为面试和实际项目都很可能碰到。6.2 打包体积怎么看怎么优化“Vue2 怎么可视化看打包的包大小”这个问题我经常在群里看到。最原始的方法是用 Vite 的话有 rollup-plugin-visualizer但 Vue2 大多基于 webpack所以最常用的就是vue-cli-service build --report。这个命令会在打包完成后生成一个 report.html 文件浏览器打开后可以看到各依赖在 bundle 里的占比。如果项目中用了 Element UI、ECharts、moment.js 这类体积大户大概率第一眼看过去会吓一跳。图形化更直观的方案是安装 webpack-bundle-analyzer。在 vue.config.js 里配置const BundleAnalyzerPlugin require(webpack-bundle-analyzer).BundleAnalyzerPlugin module.exports { configureWebpack: (config) { if (process.env.npm_config_report) { config.plugins.push(new BundleAnalyzerPlugin()) } } }之后再运行npm run build --report打包结束会自动打开一个可视化的体积分析页面每个依赖都以方块面积呈现。针对体积优化三步走最靠谱。第一步按需引入 UI 库Element UI 通过 babel-plugin-component 做按需加载第二步替换大体积库moment.js 体积非常大可以改用 day.js后者 API 几乎兼容第三步拆分第三方库在 vue.config.js 里用configureWebpack.splitChunks把 echarts、vue、vue-router 这些稳定的包拆成独立的 vendor chunk利用浏览器缓存长期不用重复下载。还有一个很直接的办法Gzip 压缩体积能砍掉一大截。6.3 排查 keep-alive 内存泄漏与定时器清理之前热词里有一条“vue2 keep-alive内存泄漏”说明实际项目里这个问题出现频率很高。keep-alive 是用来缓存组件状态的切换路由或组件时可以记住滚动位置、输入内容体验很好。但如果使用不当确实会带来内存问题。比较典型的两种场景第一种keep-alive 把图表组件缓存起来组件里创建的 echarts 实例一直存在数量一多内存必然上涨。我的建议是不用缓存的组件别加 keep-alive真正需要缓存的页面可以考虑在 deactivated 钩子里调用图表的 dispose 方法释放实例activated 时再重新初始化。第二种keep-alive 缓存了列表页里面某个组件每次创建时都在全局事件总线上绑定监听离开时又没卸载重复进入页面监听就越积越多。解决方式是在 beforeDestroy 或 deactivated 里做$off解绑。还有一类内存泄漏和 keep-alive 无关但非常常见组件里创建了 window 的 resize 或 scroll 监听beforeDestroy 阶段不清理。once 尤其要提醒隔了一段时间来排查问题定位到几行 addEventListener 没 remove非常无语。写组件时就有意识地做好“创建了什么就销毁什么”能省去后面大量排查时间。6.4 ECharts、three.js、打印与导出集成ECharts 在 Vue2 里的集成非常高频。通常我会封装一个 BaseChart 组件一个 div 作容器mounted 里 initwatch 监听 option 和配置变化调用 setOptionbeforeDestroy 里执行 dispose。还要接一个 resize 监听窗口变化时调用 chart.resize。这里有个容易忽略的问题容器尺寸必须是固定宽高或者用 flex 撑开否则初次渲染时容器宽高为 0图表就会出不来。我曾经在这个坑上浪费了半天最后发现是父级 div 的高度没设置。three.js 集成 Vue2 的思路类似但更复杂一点。three.js 不是声明式库你需要拿到组件里的容器 DOM然后创建 renderer、scene、camera自己管理 requestAnimationFrame 循环。关键还是在销毁阶段取消动画循环、移除 resize 监听、调用 renderer.dispose() 释放 GPU 资源。否则路由切换后动画还在后台运行页面内存和 GPU 占用都降不下去。前端打印这块简单场景直接 window.print() 配合 CSS 媒体查询就行复杂场景我推荐 print-js 这类库可以把指定 DOM 或页面局部区域打印出来。做导出 Excel 时热词里出现的“export2excel 换行”本质上是单元格文本里的换行符没有生效。用 Excel 表示换行需要设置 cell 样式里的 alignment 为 wrapText同时在数据文本里带上\n。如果你用的社区里的 exceljs 或前身 export2excel找一下对应的 wrapText 和行高配置就好。6.5 开发调试技巧Chrome 的 vue-devtools 是 Vue2 调试利器但要注意版本Vue2 项目需要用支持 Vue2 的 DevTools 版本。如果 Chrome 商店安装后没反应检查一下项目是不是走 https、扩展是否已允许访问文件地址。调试时最常用的两个面板一是 Components可以看当前组件树的 props、data、computed二是 Vuex可以看每次 mutation 的变更记录。响应式数据不更新的问题很多时候在 Vuex 面板里能看到原因比如数据确实没被改或者改了但组件没有正确订阅。还有一个技巧给组件 name 起好名字DevTools 里定位组件会快很多。别小看这个项目一旦大起来默认匿名组件的调试体验能让你崩溃。7. Vue2 和 Vue3 的核心差异别把 Vue3 学成 Vue2虽然这篇的主题是 Vue2但热词里 Vue2 和 Vue3 的对比出现频率非常高说明大部分人在学习新版本时也希望能找一条平滑的迁移路径。把差异点提前讲清楚反倒能帮助你更好地理解 Vue2 的设计局限。7.1 响应式原理的变化Vue2 用 Object.defineProperty 递归劫持对象属性Vue3 用 Proxy 代理整个对象。这个变化带来最直观的提升就是新增属性和数组下标修改都不再是问题了。同时 Proxy 的性能开销在深层对象上通常比递归 defineProperty 更优。当然 Proxy 也不是没有代价它的兼容性要求浏览器支持 ES6不过眼下所有现代浏览器都没问题。用一张表说明差异对比项Vue2Vue3响应式核心Object.definePropertyProxy新增属性需要 $set自动触发数组下标修改不响应自动触发初始化性能需要递归遍历懒监听按需代理兼容性支持更老浏览器要求现代浏览器7.2 diff 算法优化点Vue2 的 diff 算法是双端比较也就是说它会同时比较新旧节点列表的两头然后移动、新增、删除节点。Vue3 在编译阶段做了两个关键优化静态提升和 patchFlag。静态提升的意思是模板中那些完全静态的节点在初次渲染后就不会再参与后续 diff直接复用原来的虚拟节点。patchFlag 是给动态节点打上标记标明“这个节点的文本会变”“这个节点的 class 会变”“列表顺序会变”这样更新时只需要精确处理标记出来的部分不需要整棵树重新比较。还有一个经典算法概念叫“最长递增子序列”。列表 diff 时Vue3 会尽量复用已有的组件实例通过找到最长递增子序列判断哪些节点可以原地复用、哪些需要移动从而把 DOM 移动次数降到最低。这些都是 Vue3 性能比 Vue2 更优的底层原因。7.3 API 和工程化的变化Vue3 最显眼的变化是用 createApp 代替 new Vue// Vue2 new Vue({ render: h h(App) }).$mount(#app) // Vue3 import { createApp } from vue createApp(App).mount(#app)模板里可以写多个根节点也就是 FragmentTeleport 可以把组件内容传送到任意 DOM 节点Composition API 替代了大部分 mixin 的用法逻辑按功能分组而不是按选项分散v-model 也支持了多个参数和自定义名称灵活度更高。你要是从 Vue2 迁移到 Vue3我建议先不要全盘拥抱新写法可以把 Options API 和 Composition API 并存的写法用起来组件逐步重构。实际上 Vue3 完全兼容 Options API 的大部分写法所以老项目迁移初期可以只改工程配置逻辑代码基本不动后面再慢慢用 setup 函数重组。这种兼容性带来的是一种很舒服的渐进式体验你先能跑起来然后再决定要不要用新的组织方式。再分享一个我个人的心得不管 Vue 版本怎么变前端开发的核心始终是“把数据和视图的关系处理好”。Vue2 教会我们的组件化思维、响应式数据驱动、状态管理理念到了 Vue3 甚至其他框架里依然通用。你花在 Vue2 源码上的时间不会白费。如果现在有朋友让我给学习 Vue2 的人一个建议我想说不要只背 API而是找一个小项目把响应式原理、组件通信、Vuex、路由守卫这四个模块真正动手串一遍。遇到数据不更新的问题就去想 Object.defineProperty 的边界遇到布局混乱就去想组件和插槽的设计遇到首屏慢就去用打包分析工具看一下瓶颈。这样玩完一圈你的 Vue2 才算真正过关。最后再补一个小技巧Vue2 项目里调试数据更新问题最快的方式不是 console.log而是打开 vue-devtools 看 target 里的值到底变没变、变了之后组件有没有被标记。如果你能看到视图更新与否的时机通常问题就解决了一大半。这套经验在你以后用任何框架时都能复用得上。
Vue2核心知识体系全解：响应式原理、组件通信与性能优化实战
刚开始做技术分享的时候有个朋友让我用一句话说清 Vue2 到底在干什么。我想了想说把数据变成页面再把页面上的操作换算回数据。听起来挺简单可真要搞清楚里面每一步是怎么串起来的很多人翻过车。尤其是现在 Vue3 都稳定好几年了面试还是动不动就问 Vue2 的源码级原理存量项目也还全是 Vue2所以这套老知识不但没过时反而是最能帮你“撑场面”的东西。这篇内容我想把 Vue2 的核心知识点完整串一遍不做特别多虚的“思想总结”而是把响应式、组件通信、生命周期、指令、Vuex、路由这些主干知识讲透并且把平时大家搜索最多的高频问题——比如 keep-alive 内存泄漏、打包体积怎么看、echarts/three.js 怎么集成、Vue2 和 Vue3 到底差在哪——也一并带出来。适合两类人一是正在维护 Vue2 旧项目、被各种历史代码折磨的前端同学二是准备面试想临时把 Vue2 知识体系补完整的人。放心不会太长篇大论讲源码但核心原理我会尽量说人话。1. 先搭知识骨架Vue2 的设计主线学习 Vue2 最忌讳一上来就钻到 API 细节里。按照我自己的经验先把它的骨架立住之后所有知识点都能挂到骨架上面。Vue2 的设计主线其实只有三条数据驱动、组件化、模板编译。1.1 三条主线怎么理解第一是数据驱动。你只需要维护一份 JavaScript 对象也就是 data页面会跟着这份数据自动变。click 事件、input 事件、网络请求返回最后都会落到“改数据”这个动作上剩下的 DOM 操作交给 Vue 内部去处理。这就是“状态驱动视图”的含义。第二是组件化。页面不是一个整体而是一棵组件树。每个组件有自己独立的模板、数据、行为组件之间可以嵌套也可以互相传值。这样做的最大好处是复用和隔离公共逻辑抽成组件业务页面由组件拼装单个文件内部再复杂也不会让整个项目失控。第三是模板编译。你写的 template 其实浏览器不认识Vue 编译器会把它编译成 render 函数执行 render 函数会得到虚拟 DOM也就是一个描述页面结构的 JavaScript 对象最后再由虚拟 DOM 生成真实 DOM。这一步对新手来说比较抽象你可以把它理解成“设计师画了一张图纸施工队按图纸盖房子”代码里的 vnode 就是那张图纸。1.2 虚拟 DOM 解决了什么问题很多初学者会产生一个疑问既然数据驱动最终要操作真实 DOM为什么不直接改 DOM非要中间加一层虚拟 DOM这个问题当年我在学 Vue 时也纠结过。直接操作真实 DOM 本身没问题问题是当页面复杂、状态很多时你很难高效地判断“到底哪一块 DOM 需要更新”。频繁、盲目的真实 DOM 操作会带来性能问题还容易让代码变得混乱。虚拟 DOM 的价值就在于当数据变化时Vue 会先生成一份新的虚拟 DOM 树然后和旧的虚拟 DOM 树做对比也就是 diff找出“哪里变化了”再把这个最小差异批量更新到真实 DOM 上。这个“先算后改”的思路既能保证数据驱动又能把真实 DOM 操作的次数压到最低性能和可维护性都保住了。我见过不少同学把 Vue2 学成“模板语法大全”这个组件的 prop 会了那个指令不会就去搜一下结果项目做着没问题面试一问原理就卡壳。这就是因为大脑里没有骨架知识点全是散落的。先把三条主线记清楚后面所有内容其实都是这三条线在不同层面的延伸。2. 响应式系统Vue2 的灵魂如果只挑一个知识点深入学习 Vue2我一定推荐响应式系统。这是 Vue2 最核心也最容易出题的环节。把这里弄明白你会顺带理解为什么 Vue2 对数组有特殊处理、为什么修改数据后 DOM 不会立刻更新、为什么要用 Vue.set。2.1 Object.defineProperty 是如何劫持数据的Vue2 的响应式基础是Object.defineProperty它可以在读取对象属性或给属性赋值时插入一段自定义逻辑。Vue 初始化 data 时会遍历 data 里的所有属性把它们变成 getter 和 setter 的形式。let value 100 const obj {} Object.defineProperty(obj, count, { get() { console.log(读取 count 了) return value }, set(newValue) { console.log(count 被修改了) value newValue } })这段代码演示了最基础的“劫持”。Vue 在 get 里做依赖收集在 set 里触发更新。你在模板中一旦用到某个属性就会触发 getVue 就知道“这个视图依赖了这个数据”后续给属性赋值时触发 setVue 就知道“数据变了要把依赖这个数据的视图更新一下”。很多面试题会追问为什么 Vue3 改用 Proxy一个很直接的原因就是 Object.defineProperty 的局限——它一次只能劫持一个属性必须递归遍历整个对象才能完成深度监听如果属性是新增的初始化时根本劫持不到后续改动自然无法触发更新。2.2 依赖收集与派发更新的完整链路光知道 getter 和 setter 还不够依赖收集的过程才是真正体现设计精巧的地方。Vue 内部有几个角色Observer 负责把数据变成响应式Dep 是依赖管理器可以理解为“一个订阅中心”Watcher 是订阅者组件要更新就靠它。数据初始化时Observer 把每个属性都转成 getter/setter给每个属性创建一个 Dep。组件渲染时会执行 render 函数期间会读取模板中用到的数据触发 get此时当前组件的 Watcher 就会被收集到对应的 Dep 里。当数据发生变化时触发 setDep 通知所有收集到的 Watcher 执行更新最终重新渲染组件。这个链路串起来Vue 就实现了“精确更新”哪个组件的模板用到了变化的属性哪个组件才更新其他组件完全不受影响。我在实际项目中调试过一个表格页某个弹窗里的表单数据一变整页都在闪烁最后定位到原因是把弹窗状态放在了父组件而这个父组件模板里引用了大量数据。解决方式就是把弹窗拆成独立组件让它单独维护自己的 reactive 状态更新范围立刻变小。2.3 对象新增属性和数组索引的坑Vue2 的常见坑基本都集中在响应式检测不到数据变化上。第一类坑是给响应式对象“新增”一个属性this.user { name: Tom, age: 20 } // 直接新增属性视图不会更新 this.user.gender male原因是初始化时并没有给 gender 属性做 getter/setter 劫持后面加进去完全不受 Vue 管理。正确做法是用this.$set(this.user, gender, male)或者初始化时就预留好这个字段哪怕给的默认值是 null 也行。第二类坑是通过数组下标修改数组项。this.arr[0] new value不会触发更新因为 Vue 对数组的监听是靠重写数组方法实现的push、pop、shift、unshift、splice、sort、reverse 这些方法会被拦截。想让下标改值也响应依然要用$set或者splice替换。这里我的建议是项目中约定所有需要展示的数据都在 data 里先声明完整结构即使某些字段暂时没值也先写 null。宁可多几个空字段也不要等接口返回后再临时新增属性否则迟早遇到“数据变了画面没反应”的诡异问题。2.4 nextTick 与异步更新队列还有一个小知识点经常被忽略那就是 Vue 的更新是异步的。当你把this.msg new value写出后DOM 不会立刻变化Vue 会把同一轮事件循环里的所有数据变化收集起来放到一个更新队列里最后一次性更新 DOM。这样做的好处是避免重复渲染浪费性能。所以如果你紧接着读取 DOM 结构拿到的还是旧值。正确姿势是用this.$nextTick(() { ... })在回调里操作更新后的 DOM。面试如果问这个最好能说出它内部的回调会被放在微任务队列里而且会做兼容处理优先使用 Promise。我一直跟团队里的小朋友说响应式原理理解了你就拿到了 Vue2 这把锁的主钥匙。后面的模板语法、组件通信、生命周期都会频繁和这个机制发生关联。比如 created 里请求接口、mounted 里操作 DOM、beforeDestroy 里清理监听这些“什么阶段做什么事”的背后都是因为响应式系统和生命周期互相配合。3. 组件体系通信、生命周期与复用组件是 Vue2 最常用的功能也是项目里最容易写出“屎山”的地方。组件写得好不好直接影响后续维护成本。这一章我把组件通信、生命周期、复用手段和它们背后的适用场景讲清楚。3.1 父子组件通信的常规操作父子通信最常见的方案是 props 向下传数据、$emit 向上抛事件。这里有一个容易被忽略的要点props 只能从父到子单向流动子组件不应该直接修改 props。如果你在子组件里给 prop 重新赋值Vue 在开发环境会报出警告而且在严格模式下行为很不可控。如果子组件真的要根据 props 做内部调整正确做法是要么把 props 作为初始值复制到 data 里要么用 computed 基于 props 计算派生值。比如父组件传一个visible来控制弹窗显隐子组件内部想临时改一个显示状态就直接维护自己的innerVisible通过 watch 同步 props 的变化而不是硬改 props。// 子组件 export default { props: { visible: { type: Boolean, default: false } }, data() { return { innerVisible: this.visible } }, watch: { visible(val) { this.innerVisible val } } }这种“props 作为输入、内部 state 作为输出”的模式在复杂组件里非常实用。3.2 跨层级通信与依赖注入跨多级组件通信常用provide / inject这组 API 允许祖先组件提供一个值后代组件直接注入使用不需要一层层 props 传递。比较典型的场景是配置类数据比如某个业务组件库里最外层的 Container 提供了全局的尺寸配置里面任意层级的子组件都可以直接 inject 使用。不过要提醒一句provide 在 Vue2 默认不是响应式的。你提供的是一个普通对象子组件拿到后一旦源头的值变化子组件不会自动更新。如果需要响应式得自己把值包成响应式数据比如在 data 里定义再用 provide 传 this 上的属性这在部分情况下能间接做到响应式。除了 provide/inject还有$refs可以直接拿到组件实例、$parent/$children 可以访问父子实例。$refs 在需要调用子组件方法时非常方便比如表单页里在父组件调用子组件的 validate 方法做校验。$parent 和 $children 我第一次看文档觉得挺有用实际项目里用得非常少因为它破坏了组件封装组件之间直接耦合代码一动就碎。能不用尽量不用。3.3 事件总线与全局状态的选择当两个毫无嵌套关系的组件需要通信比如侧边栏点了一下顶栏要联动事件总线是 Vue2 的经典方案。实现很简单导出一个 Vue 实例// event-bus.js import Vue from vue export default new Vue() // A 组件 import bus from /utils/event-bus bus.$on(menu-toggle, () { ... }) // B 组件 import bus from /utils/event-bus bus.$emit(menu-toggle)但是事件总线有一个明显的坑事件满天飞项目大了之后你根本找不到谁触发谁监听排查问题非常痛苦。而且如果组件销毁后没有及时$off解绑还容易造成回调函数一直持有组件引用引发内存泄漏。所以小范围用一用可以大规模项目我更推荐直接上 Vuex虽然代码多一点但数据流向清晰调试有日志长期维护舒服得多。用表格整理一下组件通信方式的优缺点通信方式适合场景注意点props / $emit父子直接通信props 单向流不要直接修改$refs父组件调用子组件方法要等子组件 mounted 后才能拿实例provide / inject祖先给后代提供共享数据默认非响应式需自己处理事件总线任意组件间通信需手动销毁监听慎用Vuex全局共享状态适合大型项目数据流清晰3.4 生命周期什么阶段干什么事生命周期是 Vue2 组件化开发里的“时间表”。这里我不按文档顺序背而是按实际开发时每个钩子最常用的场景来讲。created 阶段data 已经初始化完成可以访问数据也可以在这里发请求初始化页面数据。很多人问 created 和 mounted 有什么区别最核心的区别是created 时模板还没渲染你拿不到真实 DOMmounted 时组件渲染完成可以操作 DOM。所以计算 DOM 尺寸、绑定第三方插件等操作必须等 mounted。beforeDestroy / destroyed 这两个钩子一定不能浪费。前面提到的定时器、事件监听、resize 回调、koa 这类全局监听所有手动绑定的东西都要在 beforeDestroy 里销毁。我曾经遇到过一个性能问题页面切来切去越来越卡最后发现是每个组件在 mounted 里监听了 window resize组件销毁时没解除监听器越积越多。检查一堆代码后才发现就是因为少写了一句 removeEventListener。beforeRouteEnter 属于路由组件独有钩子适合在进入路由前做权限校验或者提前请求数据。它有一点特殊此时组件实例还没创建拿不到 this但可以在回调里拿到实例使用 next(vm { ... })。3.5 mixin、自定义指令与逻辑复用组件复用的另一个维度是逻辑复用。Vue2 里的 mixin 可以把逻辑抽离成可复用的配置对象混入到多个组件里。比如多个列表页都需要分页参数、请求方法、重置方法就可以抽成一个 paginationMixin。但 mixin 的问题也很明显命名冲突。多个 mixin 里有相同的 data 字段或者组件自己的字段和 mixin 重复最终谁生效靠合并规则决定很难一眼看出来。数据来源不清晰维护成本高。Vue3 的 Composition API 之所以火很大程度就是因为把这种黑盒混入改成了显式的函数调用。自定义指令适合复用 DOM 操作类逻辑。比如 v-focus 自动聚焦、v-permission 根据权限控制按钮显隐、v-debounce 做输入防抖。写过一次就可以全项目通用。自定义指令的生命周期比较重要bind绑定、inserted插入、update更新、unbind解绑。操作 DOM 的放在 inserted卸载时清理监听的放在 unbind。组件通信和逻辑复用是整个 Vue2 项目架构的地基。新手容易过度使用 $refs 或事件总线折腾一把梭等代码量涨起来简直想哭。反过来把所有通信都收敛到 props 和 Vuex虽然一开始代码看起来“啰嗦”但三个月后再回来看你会感谢当初的自己。4. 模板、指令与数据展示的最佳实践模板语法是大多数人接受 Vue 的第一印象也是实际开发中每天都要写的东西。这里我不打算把文档里的指令都念一遍而是挑出那些容易写错、面试常问、实战高频的细节展开。4.1 v-model 的本质与组件定制v-model 在 Vue2 中是语法糖。用在 input 上它等于绑定 value 监听 input 事件用在组件上默认等于绑定 propvalue 监听input事件。理解了这个本质你在封装表单组件时会非常从容。如果你想改默认行为可以在组件里定义 model 选项Vue.component(custom-input, { model: { prop: checkedValue, event: change }, props: { checkedValue: Boolean } })这样父组件写v-modelisCheck实际传给子组件的是 checkedValue监听的则是 change 事件。很多二次封装组件库的开发者会用到这个特性。v-model 还有一些修饰符很实用。.number可以把输入值转成数字.trim可以自动去首尾空格.lazy可以让数据同步从 input 事件改成 change 事件也就是输入框失去焦点时才同步。别小看这几个修饰符真实业务中很多“类型不对”的 bug 都是因为忽略了 number 转换。4.2 计算属性、侦听器与方法的选择这是非常经典的面试考点也是很多人写代码时容易混淆的地方。简单说方法methods每次调用都会执行没有缓存计算属性computed有缓存只有依赖的响应式数据变化时才重新计算。计算属性最适合做“根据已有数据派生出新数据”的场景比如全选状态、购物车总价、过滤后的列表。由于有缓存即便模板里多处引用同一个计算属性也只会计算一次。侦听器watch适合处理“当某数据变化后需要做异步操作或较大开销的操作”的场景。比如监听搜索关键字变化然后防抖请求接口监听路由变化重新加载数据。我踩过一个坑初学者喜欢把列表过滤逻辑写进 method然后模板里调用filterList()结果每次渲染都重新跑一遍过滤数据量大时明显卡顿。换成 computed 之后只有依赖数据变化才重新计算页面瞬间流畅了。建议大家在写任何派生数据前想一下这里到底要不要每次执行如果不需要优先选择 computed。4.3 指令的细节与事件修饰符v-if 和 v-show 的区别也是老生常谈但真到项目里依然有人乱用。v-show 是切换 display元素始终都在 DOM 里v-if 是真正的条件创建和销毁。频繁切换的场景用 v-show比如 Tab 切换条件很少变化、对初始渲染性能有要求的场景用 v-if这样不满足条件时连 DOM 都不会创建。v-for 渲染列表时必须绑定 key。key 的作用是帮助 diff 算法识别哪些元素有变化。这里我有一个经验key 不要用数组下标除非你完全不做排序和增删。用下标做 key一旦列表顺序变化Vue 复用的是旧状态容易出现输入框内容错乱等问题。更好的选择是使用数据中稳定唯一的 id。事件修饰符是 Vue2 里很容易提升效率的小工具。.stop阻止冒泡.prevent阻止默认行为.once只触发一次.capture使用捕获模式.self只在事件目标是自己时触发还有按键修饰符.enter、.esc等。以前用 jQuery 写e.stopPropagation()现在直接在模板上写明意图代码可读性高很多。4.4 插槽从默认插槽到作用域插槽插槽是组件复用里非常灵活的一环。默认插槽就是子组件里留一个空位由父组件填充具名插槽可以指定往哪一个空位里填充内容作用域插槽则更进一步让子组件把数据通过插槽抛给父组件结构使用。Vue2.6 之后推荐使用 v-slot 语法老版本还在用的 slot、slot-scope 建议逐步迁移。封装数据表格组件的时候作用域插槽是最常用的扩展方式子组件负责渲染表格框架父组件通过作用域插槽注入每一行的自定义列内容比如状态标签、操作按钮。这样表格组件既保持高复用性又保留了充分的定制能力。这里我见过一个常见毛病为了图省事把所有插槽内容都堆进默认插槽结果页面看起来是一个超大的template块父组件模板的可读性很差。建议凡是功能区域明显的都用具名插槽比如 header、footer、row-actions后期定位问题快得多。5. 状态管理 Vuex 与路由 Vue RouterVue2 项目大了之后组件通信会变复杂路由也会多到让人头大。这两个生态库是 Vue2 实战的必选项。这里我讲核心概念和多数组件库方案背后的通盘思路。5.1 Vuex 的核心数据流Vuex 的核心概念是单一数据源。所有需要共享的数据放在 state 里需要修改数据时由 commit mutation 来同步修改异步操作则放到 actions 里由 action commit mutation。严格模式下外部不能直接修改 state这是 Vuex 设计的关键。mutation 必须是同步函数因为开发工具需要在同一时刻捕获状态变化如果 mutation 里做异步请求时序会变得不可预测调试就废了。虽然 actions 也是写 async / Promise但它只负责发起异步请求最终改数据还是同步的 mutation。我第一次接触 Vuex 时觉得绕后来想了想其实它就相当于一个“中央仓库”所有组件都往仓库进货读取 state发货commit mutation必须走统一的单据。这套约束在大型项目里能救命因为数据改动的痕迹变得可追踪你可以打开 Vue DevTools 看到每次 mutation 的变更记录比自己脑补数据流强太多。5.2 辅助函数与模块化当组件里需要用到 store 里的很多状态时一个个写this.$store.state.xxx非常啰嗦于是就有了 mapState、mapGetters、mapMutations、mapActions 这些辅助函数。它们最大的作用是简化模板和逻辑中的引用import { mapState, mapMutations } from vuex export default { computed: { ...mapState([userInfo, permissions]), ...mapGetters([isLogin]) }, methods: { ...mapMutations([SET_USER]) } }注意 mapState 要放在 computed 里mapMutations 要放在 methods 里这样页面里就能直接用 this.userInfo、this.SET_USER 了看着像组件自身属性实际上是 store 的映射。模块多了之后要使用 namespaced 给每个模块加命名空间。加了这个之后mapState、mapMutations 第一个参数传模块名比如...mapState(user, [info])。我建议从一开始就开启 namespaced哪怕模块就几个避免后面模块数量上来后同名 mutation 互相干扰。5.3 路由模式与路由守卫Vue Router 最常见的问题就是面试问 hash 和 history 模式的区别。hash 模式用 URL 的 # 号路径刷新页面不会丢失因为 # 后面的内容不会发送给服务器适合静态部署history 模式用 HTML5 History API路径更美观但刷新页面时服务器必须配置好 fallback把不存在的路径都指向 index.html否则会 404。路由守卫是权限控制的关键位置。全局前置守卫router.beforeEach适合统一做登录校验比如判断有没有 token没有就跳转到登录页。路由独享守卫beforeEnter适合对特定页面做权限校验。组件内守卫beforeRouteEnter则可以读取当前路由参数提前请求数据。动态菜单和按钮权限是后台管理系统的高频需求思路通常是用户登录成功后后端返回该用户的权限码和菜单列表前端把菜单配置映射成路由通过 router.addRoutes 动态注册按钮权限则用自定义指令或函数判断。我实际做过一个中台系统后端返回的菜单树带着前端组件的路径映射表前端先注册静态路由登录页、404、首页再根据权限列表动态拼接路由并 addRoutes。这个方案比较主流需要注意的是addRoutes 之后一定要用 next({ ...to, replace: true }) 重新进入一次避免刷新白屏。6. 实战高频场景脚手架、打包、性能与调试前边的内容更偏“原理和概念”这一部分我把大家真实工作中遇到最多的场景集中回答一下。你会发现这些问题其实考察的还是前面的知识只是换了一层业务外衣。6.1 从 Vue CLI 到 HBuilderX项目搭建方式Node 生态下的 Vue2 项目最常见的是 Vue CLI 3/4 创建的模板基于 webpack 4。你只需要运行vue create project-name预设选 sass / router / vuex就能得到一个基础工程。Vue CLI 封装了 webpack 配置日常开发用npm run serve启动、npm run build打包就行。如果你想知道打包的细节和体积问题下面会详细说。另一类很常见的场景是用 HBuilderX 做 Vue2 项目尤其是 uni-app 生态。uni-app 底层在 Vue2 上运行时开发体验和常规 Vue CLI 项目差别不大同样支持 Vue2 的核心语法但它引入了 pages.json、manifest.json 这类配置文件数据请求推荐封装成 uni.request。如果你已经会用 Vue2 写网页转到 uni-app 时不要被配置文件吓到核心的 v-model、组件、生命周期、computed 都是一模一样的。如果你做的是纯桌面 Web 管理系统我用 Vue CLI 会更多一些如果目标是 App 或小程序多端发布HBuilderX 开 uni-app 就是更省精力的选择。两条路线都要会因为面试和实际项目都很可能碰到。6.2 打包体积怎么看怎么优化“Vue2 怎么可视化看打包的包大小”这个问题我经常在群里看到。最原始的方法是用 Vite 的话有 rollup-plugin-visualizer但 Vue2 大多基于 webpack所以最常用的就是vue-cli-service build --report。这个命令会在打包完成后生成一个 report.html 文件浏览器打开后可以看到各依赖在 bundle 里的占比。如果项目中用了 Element UI、ECharts、moment.js 这类体积大户大概率第一眼看过去会吓一跳。图形化更直观的方案是安装 webpack-bundle-analyzer。在 vue.config.js 里配置const BundleAnalyzerPlugin require(webpack-bundle-analyzer).BundleAnalyzerPlugin module.exports { configureWebpack: (config) { if (process.env.npm_config_report) { config.plugins.push(new BundleAnalyzerPlugin()) } } }之后再运行npm run build --report打包结束会自动打开一个可视化的体积分析页面每个依赖都以方块面积呈现。针对体积优化三步走最靠谱。第一步按需引入 UI 库Element UI 通过 babel-plugin-component 做按需加载第二步替换大体积库moment.js 体积非常大可以改用 day.js后者 API 几乎兼容第三步拆分第三方库在 vue.config.js 里用configureWebpack.splitChunks把 echarts、vue、vue-router 这些稳定的包拆成独立的 vendor chunk利用浏览器缓存长期不用重复下载。还有一个很直接的办法Gzip 压缩体积能砍掉一大截。6.3 排查 keep-alive 内存泄漏与定时器清理之前热词里有一条“vue2 keep-alive内存泄漏”说明实际项目里这个问题出现频率很高。keep-alive 是用来缓存组件状态的切换路由或组件时可以记住滚动位置、输入内容体验很好。但如果使用不当确实会带来内存问题。比较典型的两种场景第一种keep-alive 把图表组件缓存起来组件里创建的 echarts 实例一直存在数量一多内存必然上涨。我的建议是不用缓存的组件别加 keep-alive真正需要缓存的页面可以考虑在 deactivated 钩子里调用图表的 dispose 方法释放实例activated 时再重新初始化。第二种keep-alive 缓存了列表页里面某个组件每次创建时都在全局事件总线上绑定监听离开时又没卸载重复进入页面监听就越积越多。解决方式是在 beforeDestroy 或 deactivated 里做$off解绑。还有一类内存泄漏和 keep-alive 无关但非常常见组件里创建了 window 的 resize 或 scroll 监听beforeDestroy 阶段不清理。once 尤其要提醒隔了一段时间来排查问题定位到几行 addEventListener 没 remove非常无语。写组件时就有意识地做好“创建了什么就销毁什么”能省去后面大量排查时间。6.4 ECharts、three.js、打印与导出集成ECharts 在 Vue2 里的集成非常高频。通常我会封装一个 BaseChart 组件一个 div 作容器mounted 里 initwatch 监听 option 和配置变化调用 setOptionbeforeDestroy 里执行 dispose。还要接一个 resize 监听窗口变化时调用 chart.resize。这里有个容易忽略的问题容器尺寸必须是固定宽高或者用 flex 撑开否则初次渲染时容器宽高为 0图表就会出不来。我曾经在这个坑上浪费了半天最后发现是父级 div 的高度没设置。three.js 集成 Vue2 的思路类似但更复杂一点。three.js 不是声明式库你需要拿到组件里的容器 DOM然后创建 renderer、scene、camera自己管理 requestAnimationFrame 循环。关键还是在销毁阶段取消动画循环、移除 resize 监听、调用 renderer.dispose() 释放 GPU 资源。否则路由切换后动画还在后台运行页面内存和 GPU 占用都降不下去。前端打印这块简单场景直接 window.print() 配合 CSS 媒体查询就行复杂场景我推荐 print-js 这类库可以把指定 DOM 或页面局部区域打印出来。做导出 Excel 时热词里出现的“export2excel 换行”本质上是单元格文本里的换行符没有生效。用 Excel 表示换行需要设置 cell 样式里的 alignment 为 wrapText同时在数据文本里带上\n。如果你用的社区里的 exceljs 或前身 export2excel找一下对应的 wrapText 和行高配置就好。6.5 开发调试技巧Chrome 的 vue-devtools 是 Vue2 调试利器但要注意版本Vue2 项目需要用支持 Vue2 的 DevTools 版本。如果 Chrome 商店安装后没反应检查一下项目是不是走 https、扩展是否已允许访问文件地址。调试时最常用的两个面板一是 Components可以看当前组件树的 props、data、computed二是 Vuex可以看每次 mutation 的变更记录。响应式数据不更新的问题很多时候在 Vuex 面板里能看到原因比如数据确实没被改或者改了但组件没有正确订阅。还有一个技巧给组件 name 起好名字DevTools 里定位组件会快很多。别小看这个项目一旦大起来默认匿名组件的调试体验能让你崩溃。7. Vue2 和 Vue3 的核心差异别把 Vue3 学成 Vue2虽然这篇的主题是 Vue2但热词里 Vue2 和 Vue3 的对比出现频率非常高说明大部分人在学习新版本时也希望能找一条平滑的迁移路径。把差异点提前讲清楚反倒能帮助你更好地理解 Vue2 的设计局限。7.1 响应式原理的变化Vue2 用 Object.defineProperty 递归劫持对象属性Vue3 用 Proxy 代理整个对象。这个变化带来最直观的提升就是新增属性和数组下标修改都不再是问题了。同时 Proxy 的性能开销在深层对象上通常比递归 defineProperty 更优。当然 Proxy 也不是没有代价它的兼容性要求浏览器支持 ES6不过眼下所有现代浏览器都没问题。用一张表说明差异对比项Vue2Vue3响应式核心Object.definePropertyProxy新增属性需要 $set自动触发数组下标修改不响应自动触发初始化性能需要递归遍历懒监听按需代理兼容性支持更老浏览器要求现代浏览器7.2 diff 算法优化点Vue2 的 diff 算法是双端比较也就是说它会同时比较新旧节点列表的两头然后移动、新增、删除节点。Vue3 在编译阶段做了两个关键优化静态提升和 patchFlag。静态提升的意思是模板中那些完全静态的节点在初次渲染后就不会再参与后续 diff直接复用原来的虚拟节点。patchFlag 是给动态节点打上标记标明“这个节点的文本会变”“这个节点的 class 会变”“列表顺序会变”这样更新时只需要精确处理标记出来的部分不需要整棵树重新比较。还有一个经典算法概念叫“最长递增子序列”。列表 diff 时Vue3 会尽量复用已有的组件实例通过找到最长递增子序列判断哪些节点可以原地复用、哪些需要移动从而把 DOM 移动次数降到最低。这些都是 Vue3 性能比 Vue2 更优的底层原因。7.3 API 和工程化的变化Vue3 最显眼的变化是用 createApp 代替 new Vue// Vue2 new Vue({ render: h h(App) }).$mount(#app) // Vue3 import { createApp } from vue createApp(App).mount(#app)模板里可以写多个根节点也就是 FragmentTeleport 可以把组件内容传送到任意 DOM 节点Composition API 替代了大部分 mixin 的用法逻辑按功能分组而不是按选项分散v-model 也支持了多个参数和自定义名称灵活度更高。你要是从 Vue2 迁移到 Vue3我建议先不要全盘拥抱新写法可以把 Options API 和 Composition API 并存的写法用起来组件逐步重构。实际上 Vue3 完全兼容 Options API 的大部分写法所以老项目迁移初期可以只改工程配置逻辑代码基本不动后面再慢慢用 setup 函数重组。这种兼容性带来的是一种很舒服的渐进式体验你先能跑起来然后再决定要不要用新的组织方式。再分享一个我个人的心得不管 Vue 版本怎么变前端开发的核心始终是“把数据和视图的关系处理好”。Vue2 教会我们的组件化思维、响应式数据驱动、状态管理理念到了 Vue3 甚至其他框架里依然通用。你花在 Vue2 源码上的时间不会白费。如果现在有朋友让我给学习 Vue2 的人一个建议我想说不要只背 API而是找一个小项目把响应式原理、组件通信、Vuex、路由守卫这四个模块真正动手串一遍。遇到数据不更新的问题就去想 Object.defineProperty 的边界遇到布局混乱就去想组件和插槽的设计遇到首屏慢就去用打包分析工具看一下瓶颈。这样玩完一圈你的 Vue2 才算真正过关。最后再补一个小技巧Vue2 项目里调试数据更新问题最快的方式不是 console.log而是打开 vue-devtools 看 target 里的值到底变没变、变了之后组件有没有被标记。如果你能看到视图更新与否的时机通常问题就解决了一大半。这套经验在你以后用任何框架时都能复用得上。
