Vue生命周期

Posted 2022-12-04 home-

写手在作画的夜晚，留下路人惊叹，在这座城市总有一些还没有歇下

Vue的生命周期，话不多说

一个组件从创建到销毁的这个过程叫做生命周期   生命周期钩子函数

组件从创建到销毁的过程

1、创建前 创建后

2、挂载前  挂载后

3、更新前  更新后

 

4、销毁前  销毁后

 

Vue_生命周期_创建前 or 创建后

创建前： beforeCreate()
当前生命周期函数主要用来做初始化工作,在这个生命周期函数中我们可以创建一个loading

创建后:  created()
1、在当前生命周期函数中我们可以访问到vm身上所有的属性和方法
2、当前生命周期函数会将data和methods身上所有的属性和方法都挂载在vm的实例身上
3、当前生命周期函数会将data身上所有的属性添加一个getter/setter方法，因此如果需要进行
前后端数据交互的时候必须在当前生命周期中进行(响应式原理),如果数据没有提前在data中进行了绑定
那么这个属性身上就不会有getter/setter方法，因此数据也不会动态的进行改变
为挂载前$el 属性目前不可见。

 

Vue_生命周期_挂载前 or 挂载后

 

挂载前: beforeMount()
数据和模板还没有进行相结合，在这个生命周期函数中我们可以进行数据最后的修改
在当前生命周期函数中是访问不到真实的DOM结构

挂载后: mounted()
数据和模板已经结合，在这个生命周期函数中我们可以通过this.$refs访问到真实DOM结构
ref="值必须是整个VDom中唯一"
访问的时候通过this.$refs.值(ref的值)

 

 

Vue_生命周期_更新前 or 更新后

 

更新前: beforeUpdate()
当data中的数据发生了改变的时候就会执行
1、可以访问到真实的DOM结构
2、可以对数据做最后的修改 
3、当前生命周期函数中的数据和模板还没有更新完毕

更新后:  updated()
1、数据更新后最新的DOM结构
2、在当前生命周期函数中需要特别的注意，因为当前函数是一个频繁触发的函数。
因此如果在当前生命周期函数中做一些事件绑定或者实例化的时候需要做一个提前判断

 

 

Vue_生命周期_销毁前 or 销毁后　　

销毁前: beforeDestroy()
1、在这个生命周期函数中，还是可以继续访问到真实的DOM结构以及data中的数据
2、一般我们都会在这个生命周期函数中做一些事件解绑/移除的操作

销毁后:destroyed()
1、将DOM与数据之间的关联进行断开
2、在当前生命周期函数中是访问不到真实的DOM结构

 

Vue_生命周期_活跃状态

 

活跃状态: activated
如果当前页面是一个显示的状态，那么activated这个声明周期就会被触发

 

 

Vue_生命周期_缓存状态

 

缓存状态: deactivated
如果当前页面是一个非显示状态，那么deactivated这个生命周期就会被触发

 

 

Vue_生命周期_多次执行的生命周期函数
更新前: beforeUpdate()
更新后: updated()


Vue_生命周期_组件创第一个创建时会执行哪些生命周期函数
创建前: beforeCreate()
创建后: created()
挂载前: beforeMount()
挂载后: mounted()