Code前端首页关于Code前端联系我们

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

terry 8小时前 阅读数 10 #Vue
文章标签 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.xxxthis.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操作无效”这些问题,下次写组件时,先想想需求对应哪个生命周期阶段,代码逻辑自然更丝滑~

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门