生命周期
主要分为,初始化、运行中、销毁。
生命周期钩子
1. beforeCreate
理解
在实例初始化之后,执行beforeCreate钩子函数。之后再进行数据观测 (data observer) 和 event/watcher事件配。
vue实例初始化_init()中有这样的一个执行顺序:其中initState()是在beforeCreate和created之间
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm) //初始化
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
在initState()做了这些事情:
if (opts.props) initProps(vm, opts.props)//初始化Props
if (opts.methods) initMethods(vm, opts.methods)//初始化methods
if (opts.data) {
initData(vm)} else {
observe(vm._data = {}, true /* asRootData */)}//初始化data
if (opts.computed) initComputed(vm, opts.computed)//初始化computed
因此,此时data、watcher、methods、computed都不存在。
使用
vue实例只是一个空壳,一般不做操作。
2. created
理解
在实例已经创建完成之后被调用。vue实例在created之前已完成以下配置:数据观测(data observer) ,属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
使用
这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数跟其他的钩子函数,一般可以在这里做初始数据的获取。
3.beforeMount
理解
在挂载开始之前被调用,相关的 render 函数 首次被调用。编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,但没有挂载,此时DOM还是无法操作的。
使用
一般可以在这里做初始数据的获取。在这里更改数据,不会触发updated跟其他的钩子函数数。
4.mounted
理解
在挂载之后被调用。在这一步渲染出真实dom,并挂载到实例上。 此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了。 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted。
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
使用
可以在这里操作真实dom等事情。
5.beforeUpdate
理解
当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。
使用
这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。也可以在这个钩子中进一步地修改数据,不会触发附加的重渲染过程(不建议)。
6.updated
理解
虚拟DOM重新渲染 和打补丁之后被调用。不要在此时修改data,否则会继续触发beforeUpdate、updated这两个生命周期,进入死循环!
使用
此时数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom。
7.beforeDestroy
理解
当经过某种途径调用$destroy方法后,立即执行beforeDestroy,在这一步,实例仍然完全可用。
使用
一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等。
8.destroyed
理解
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁
使用
在这里做善后工作也可以。
beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed这几个钩子函数,在服务器端渲染期间不被调用
看图
刚接触vue时,看着这个图一头雾水,一脸懵逼,用的多了理解就会更进一步,结合这个图也能帮助自己更好的理解生命周期。用官网那句话:
随着你的不断学习和使用,它的参考价值会越来越高。
