vue|生命周期的初步探讨🔥🔥

171 阅读2分钟

1、生命周期各个阶段

vue的生命周期分为初始化、挂载、更新、销毁4个阶段

beforeCreate:创建前,在beforeCreate阶段,还不能访问data、computed、watch、methods上的方法和数据。

created:创建后,在created阶段,可以访问data、computed、watch、methods上的方法和数据。不能访问$el等属性

beforeMount:挂载前,已经把data里的数据和模板生成html,但是还没有把html挂载到界面

mounted:挂载后,可以正常获取DOM元素 beforeUpdate:更新前,获取不到更新的真实DOM

update:更新后,获取的是更新的真实DOM beforeDestroy:销毁前(比如采用v-if的方式,移除组件) destroyed:销毁后

keep-active两个生命周期函数

activated:在keep-active组件激活的时候调用

deactivated:在keep-active组件停用时调用

A,B均为首次进入

进入页面A开始: beforeCreate -> created -> beforeMount-> mounted-> activated

离开A去B时(销毁时): B: beforeCreate -> B: created -> B: beforeMount -> A: deactivated -> B: mounted -> B: activated

如果都不是首次进入

从B进入页面A开始:B: deactivated -> A: activated

从A进入页面B开始:A: deactivated -> B: activated

image.png

2、父子组件的执行顺序

1.初始化挂载过程

父组件beforeCreate

父组件Created

父组件 beforeMount

子组件 beforeCreate

子组件Created

子组件 beforeMount

子组件 Mounted

父组件Mounted

2.更新过程

父组件 boforeUpdate

子组件boforeUpdate

子组件 updated

父组件 updated

3.销毁过程

父组件 beforeDestroy

子组件 beforeDestroy

子组件 destroyed

父组件 destroyed

3、created和mounted的区别

created在模板渲染成html之前去调用,只要作用是初始化一些数据,在created阶段可以访问data、methods、props、computed

mounted在模板渲染成html之后调用,在初始化界面之后,在对html中的DOM做一些操作,可以在mounted阶段操作,这个阶段可以访问el元素

4、在哪个生命周期中请求异步数据

一般可以在create、beforeMount、mounted中请求异步数据,因为这几个生命周期函数中已经可以访问data,异步请求的数据可以给data赋值

推荐在created中进行异步请求,访问速度比较快 SSR不支持beforeMount、mounted这两个生命周期函数

参考👀

blog.csdn.net/m0_37911124…