vue的整个生命周期被划分为创建,挂载,更新,销毁。而实现这几个阶段靠的是vue钩子函数,也正是通过钩子函数我们能更清楚的了解vue实例的运作机制,实现业务逻辑。
具体看如下的几个阶段:
一,beforecreate:
此阶段为vue实例的初始化之后,此时的数据观察和事件的配置都没有准备好,接下来我试着console一下数据观察data和被挂载元素el,代码如下:
打印如下:此时的data和el还是undefined,还不可用
二,created:
在beforecreate之后紧接着的钩子函数就是create创建完毕,此时的数据准备已经创建完毕,但数据还未被挂载,同样打印data和el,代码如下:
此时的DOM还没有生成,data还没有被挂载,所以data是一个Object类型,el还是undefined
三,beforeMount:
此阶段为挂载之前,数据data已经准备好,el也已经成功的关联到指定的DOM节点,但是data数据还没有渲染,打印el,代码如下:
可看到如下打印结果:
四,mounted:
此阶段为挂载完毕,此阶段数据也都会渲染成功,同样打印el,代码如下:
此时的{{name}}已经被成功的渲染
五,beforeUpdate:
修改vue实例中的data时,vue就会页面自动更新渲染,beforeUpdate会检测到数据即将更新渲染,在更新渲染之前也就会触发钩子函数beforeUpdate,此阶段打印的data 不是最新的,
六,updated:
此阶段就是数据就是更新渲染之后,打印出来的也是最新的数据了
打印结果如下:
七,beforeDestory:
成功销毁之前会调取钩子函数beforeDestory(),
八,destoryed:
成功销毁之后,被销毁实例已经完全与其他实例解绑,与试图部分也无关联,销毁之后再修改数据会发现视图已经不再更新,说明实例已经成功解绑。