一、Vue2生命周期是啥？为啥要关注它？

咱做前端开发的，尤其是用Vue2的时候，经常听人说“生命周期”，但好多新手刚接触时一头雾水，比如不知道每个阶段能干嘛、钩子函数咋用，甚至项目里遇到组件加载异常都想不到是生命周期没处理好，今天就用问答的方式，把Vue2生命周期拆明白,从基础到实战一次性讲透～

你可以把组件想象成一个“人”，从出生（创建）、长大（挂载、更新）到死亡（销毁）的整个过程，就是生命周期，Vue在每个关键节点（比如刚创建完数据、DOM刚渲染好）会自动触发一些函数，这些函数就是「生命周期钩子」。

咱写代码时，得在合适的阶段干合适的事——比如你想一进页面就请求接口拿数据，总不能在DOM还没影的时候操作DOM吧？这时候就得靠生命周期选对时机，不然不是拿不到数据，就是页面报错，举个实际场景：做商品列表页，得等数据请求回来再渲染列表，要是阶段选错了，要么列表空着，要么请求还没发DOM就渲染了，用户看到个空页面,体验贼差。

Vue2生命周期分哪些阶段？对应的钩子函数是啥？

Vue2的生命周期可以分成创建、挂载、更新、销毁四大阶段，每个阶段对应2个钩子函数,咱一个个拆：

创建阶段：组件“出生”前两步

- beforeCreate：组件刚被Vue初始化，这时候data里的数据、methods里的方法都还没“激活”，打个比方，就像婴儿刚出生，还没睁眼没长牙，啥功能都用不了，所以这个钩子基本用不上,知道有这么个阶段就行。

- created：Vue已经把「数据观测（让data变成响应式）」「事件配置」这些核心功能搞完了，这时候data和methods能正常用了！很多人喜欢在这发Ajax请求，因为数据能存到data里，还不用等DOM渲染，效率高，比如做新闻APP，进入列表页时，created里调接口拿新闻数据，数据回来后直接存到data,页面自动渲染。

挂载阶段：组件和DOM“结合”的过程

- beforeMount：Vue已经把模板编译好了，但还没把模板渲染成真实DOM挂到页面上，这时候你在页面上看不到渲染后的内容，主要是Vue内部做准备工作,开发时很少用这个钩子。

- mounted：重中之重！模板已经变成真实DOM，并且挂载到页面上了，这时候能拿到完整的DOM结构，操作DOM、初始化第三方插件（比如swiper轮播、echarts图表）必须在这一步，举个栗子：做轮播图组件时，mounted里初始化swiper，因为这时候轮播的DOM节点（比如轮播容器、幻灯片）已经存在了,插件能找到节点才能工作。

更新阶段：组件“长大”（数据变化后页面更新）

当组件里的data变化时,Vue会触发更新阶段：

- beforeUpdate：数据已经改了，但DOM还没更新，这时候可以在DOM更新前做些逻辑（比如统计数据变化前的状态），但实际开发用得少,了解即可。

- updated：数据改了，DOM也更新完了，如果想在数据变化后，基于新的DOM做操作（比如表格数据变了，重新计算表头宽度适配内容）,就用这个钩子。

销毁阶段：组件“死亡”前的清理

当组件被移除（比如路由切换、v-if销毁）时,进入销毁阶段：

- beforeDestroy：组件快被销毁了，但还没销毁，这时候组件里的data、methods都还能用，所以要把定时器清掉、自定义事件解绑，不然页面关了定时器还在跑，就内存泄漏了，比如做实时聊天组件，每隔5秒请求新消息的定时器,得在beforeDestroy里用clearInterval清掉。

- destroyed：组件已经被完全销毁，所有东西都解绑、释放了，这时候基本没操作空间,知道有这个阶段就行。

实际开发中，每个钩子咋选？举个项目例子！

光说理论太虚，咱拿「用户信息卡片」组件举个完整例子,看看每个阶段咋用：

需求：进入页面显示用户头像、昵称、个人简介；头像点击后放大（用第三方动画库）；组件销毁前清掉检查用户在线状态的定时器。

• created：请求用户信息接口，因为这时候能存数据到data，还不用等DOM，请求早发早拿到数据,页面渲染快。
• mounted：给头像加点击放大动画，第三方动画库需要找到DOM节点才能初始化，所以得等mounted（DOM渲染完）再执行。
• beforeDestroy：清掉检查在线状态的定时器，组件要销毁了，定时器不清理的话，就算组件没了，定时器还在后台跑,既耗电又占内存。

再举个后台表单的例子：

• created：拉取表单下拉选项（比如省市区列表），早请求早拿到数据,表单渲染时直接用。
• mounted：初始化日期选择器（第三方UI库的组件），日期选择器需要DOM存在才能渲染弹出层,所以mounted里初始化。
• updated：表单数据变化后自动保存到本地，比如用户改了昵称，数据变化后DOM也更新了，这时候在updated里把最新数据存到localStorage,下次打开页面自动填充。

生命周期里的this指向哪？有啥要注意的？

简单说：除了beforeCreate，其他钩子函数里的this都指向「当前组件实例」！所以在created里能写this.data.xxx、this.methods.xxx，但beforeCreate的时候，this.data是undefined，因为数据还没初始化，千万别在这阶段访问数据或方法,必报错！

Vue2和Vue3生命周期有啥区别？学哪个？

Vue3里，选项式API（和Vue2写法像的）还能用原来的钩子名（比如mounted）；但组合式API（setup语法糖）里，钩子改成onXxx形式了,比如onMounted代替mounted。

如果是维护老项目，Vue2的生命周期必须懂；学Vue3的话，理解生命周期的「阶段逻辑」（比如什么时候请求、什么时候操作DOM）是一样的，只是写法变了，所以先把Vue2的搞透，学Vue3更顺，相当于掌握了“底层逻辑”。

这些坑你踩过没？讲讲生命周期里的常见错误！

新手最容易栽的几个坑,提前避坑：

1. 想操作DOM，却在created里写代码→页面直接报错！因为created时DOM还没渲染，元素根本找不到,操作DOM必须等mounted。
2. 数据变了，DOM没更新就想操作→比如点击按钮改了列表数据，立刻想获取列表长度，结果拿到旧值，这是因为Vue更新DOM是异步的，得用$nextTick等DOM更新完再执行。
3. 忘了在beforeDestroy清定时器→页面关了，定时器还在后台跑，页面越来越卡，所以只要组件里有setInterval、setTimeout，必须在beforeDestroy里用clearInterval/clearTimeout清理。
4. 把mounted当“万能钩子”→数据更新后想操作DOM，结果放在mounted里，数据变了mounted不会再执行，页面没变化,这时候得用updated钩子。

Vue2生命周期就像组件的“时间轴”，每个阶段有明确分工，搞懂每个钩子的时机和作用，写代码时就知道“什么时候该干啥”，再也不会出现“数据请求早了/晚了”“DOM操作无效”这些问题，下次写组件时，先想想需求对应哪个生命周期阶段,代码逻辑自然更丝滑～