1.在beforeCreate之前的生命周期
这是创建之前的阶段,此时该实例内所有东西还没有创建,所以这个生命周期钩子函数中$el,data都是undefined
2.在beforeCreate和created钩子函数之间的生命周期
在这个生命周期之间,进行初始化事件,进行数据的观测,在created的时候数据已经和data属性进行绑定,在这个生命周期钩子函数中,可以获取到data的值并对他进行操作
3.在created和beforeMount间的生命周期
(1)在这一阶段,首先会判断是否有el选项,如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该实例上调用vm.$mount(el) 即动态引入了el
(2)除了el,我们还会用到template,以下为template对生命周期的影响
1.如果vue实例对象中有template参数选项,则将其作为模板编译成render函数
2.如果没有template选项,则将外部html作为模板编译
3.template中的模板优先级要高于outer html的优先级
所以el的判断要在template之前,因为vue需要通过el找到对应的outer template
(3)在vue对象中,还有一个render函数,它是以createElement作为参数,然后做渲染,而且可以直接嵌入JSX
注:综合排名优先级:render函数>template选项>outer html
4.beforeMount和mounted钩子函数之间的生命周期
此时是给vue实例对象添加$el成员,并且替换掉挂载的DOM单元
5.beforeUpdate钩子函数和updated钩子函数间的生命周期
当vue发现data中的数据发生变化,会触发对应组件的重新渲染,当数据改变后调用beforeupdate,当渲染完成后调用updated钩子函数
data值改变后出发beforeUpdate钩子函数,当页面渲染完成后调用updated
在mouted钩子函数中执行修改data的操作会触发beforeUpdate,而他之前的函数中只要不是可以跳出主线程的数据操作,都不会触发beforeUpdate。例如使用setTimeout会使其中代码跳出主线程到异步线程中,所以它的执行会在mounted之后,所以会触发beforeUpdate
6.beforeDestroy和destroyed钩子函数间的生命周期
beforeDestroy钩子函数在实例销毁之前调用,在这一步实例仍然可用,destroyed钩子函数在vue实例销毁后调用。调用后,vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁