生命周期:
在vue实例对象从创建到销毁的过程就是这个vue实例的生命周期
在这个过程中,vue实例经过了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。
我们今天来详细的看下生命周期中的钩子函数
钩子函数:
1.beforeCreate
在我们vue创建实例对象的过程中这是第一步,到这一步这个vue实例对象身上只有默认的一些生命周期函数和默认的事件,在这里data,methods中的数据还没有初始化。
2.create
在这个过程data和methods已经初识化好了,如果需要调用这些数据和方法,最早只能在create中操作。在这里,我们可以开始调用方法进行数据请求
在之后的过程中是vue的一些内部操作,vue开始编辑模板,把vue代码中的指令进行执行,在内存中生成一个编辑好的最终模板字符串,把这个模板字符串渲染为内存中的DOM,此时只是在内存中,渲染好了模板,并没有把模板真正挂载到页面上去
3.beforeMount
在此函数执行之前,模板已经编辑好了,但是没有渲染,页面还是旧的。
4.mounted
在beforeMount到这一步之前就将内存中编译好的模板,真正替换到浏览器页面中去了。如果要进行操作页面上的DOM节点,最早在这里进行。
5.beforeUpdate
beforeUpdate调用之后,我们又会重新生成一个新的虚拟dom(Vnode),然后会拿这个最新的Vnode和原来的Vnode去做一个diff算法,从而更新render函数中的最新数据,再将更新后的render函数渲染成真实dom。也就完成了我们的数据更新
这两个是组件运行阶段的生命周期函数,这两个事件,会根据data数据的改变,有选择性的触发0次和多次
同时在根据data中的最新数据,在内存中重新渲染出一份最新的内存DOM树,并重新渲染到真实页面中,在这里完成data(Model层)->view(视图层)的更新
6.update
在update事件执行的时候,页面和data数据已经保持同步了,都是最新的
7. beforeDestroy
在执行到这里的时候进入到销毁阶段,但是实例的data数据,methods,过滤器,指令等都处于可用状态,此时还没有真正的销毁。
8.destroy
执行到这里的时候,组件全部销毁,所有的数据,方法等都不可用了
参考这个图来记忆这几个钩子函数。