vue的生命周期
2019-12-11 本文已影响0人
橙赎
一、概念
vue生命周期,又叫生命周期钩子函数,是组件从创建到销毁的过程。
下面是vue官网的vue生命周期图
二、生命周期的八大部分
-
beforeCreate
: 创建前······ -
created
: 创建后 -
beforeMount
: 挂载前 -
mounted
: 挂载后 -
beforeUpdate
: 更新前 -
updated
: 更新后 -
beforeDestory
: 销毁前 -
destoryed
: 销毁后
1.
beforeCreate
: 创建前。当前生命周期刚刚开始实例化,还不能对DOM和数据进行操作,el和data也没有初始化,这个时候打印el
和data
的值都是undefined
。
2
created
: 创建后。完成了data数据的初始化,el仍然没有,这个时候打印el
的值仍然是undefined
。
3
beforeMount
: 挂载前。完成了对el
和data
的初始化,这里的el
只是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
4
mounted
: 挂载后。el是用来告诉实例在那个元素上进行挂载的,在beforeMount触发的时候el还是没有初始化,而到mounted的时候已经找到要挂载的元素,并且将模板编译了。
5
beforeUpdate
: 更新前。当去改变数据的值的时候,触发了beforeUpdate函数,这个时候$el的值已经更改了,但是dom并没有变动。
6
updated
: 更新后。到update完成,更新dom结构。
7
beforeDestory
: 销毁前。在这一步,实例仍然可用
vue生命周期8
destoryed
;调用后。Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。这个时候去更新操作也不会有什么效果