Vue在被创建的时候都要经过一系列的初始化过程，这个初始化过程例如设置数据监听，编译模板，将实例挂载Dom并在数据变化时更新Dom。
在这个过程中也会运行生命周期钩子函数。
生命周期钩子函数：
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestory
- destoryed
1.beforeCreate 和 created之间的生命周期
初始化事件，进行数据的观测，可以看到当created的时候已经和data绑定（所以当data改变的时候，视图也会进行变化）
image.png
2. created 和 beforeMount之间生命周期
image.png
created和beforeMount之间可以看到需要进行判断是否有el对象，有则继续向下编译，没有的话则停止编译，直到vue实例上调用vm.$mount(el)。
例如 注释掉
el:'#app'
则运行到created这个生命周期就停止运行了，
但是如果这个时候在vue实例上调用，就会继续向下执行
vm.$mount(el) // 这个el就是挂载的dom节点
template有否对于生命周期的影响
(1) 存在template时，将其作为模板编译成render函数
(2) 不存在时，则用外部HTML作为模板编译
可以看出temlate优先级要比外部HTML高
vue对象中还存在render函数，以createElement作为参数，然后做渲染操作，可直接嵌入jsx
渲染优先级顺序
render函数 > template >外部HTML
3.beforeMount和mounted之间生命周期
image.png
可以看到beforeMount之后，给vue实例添加$el对象，并且替换掉挂载的dom元素
4.beforeUpdate和updated之间生命周期
image.png
当data变化时，会触发到对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。
5.beforeDestory和destoryed
image.png
beforeDestory钩子函数在实例销毁前调用，在这一步，实例仍完全可用。
destoryed在实例销毁后调用，调用后，vue指定的所有东西都会解绑定，所有监听器会被移除，子实例也完全被销毁。
在vue-cli生成的项目中，打印生命周期前后如下：
beforeCreate() {
console.group('------beforeCreate创建前状态------');
console.log('%c%s', 'color:red', 'el :' + this.$el); //undefined
console.log('%c%s', 'color:red', 'data :' + this.$data); //undefined
}
created() {
console.group('------created创建完毕状态------');
console.log('%c%s', 'color:red', 'el :' + this.$el); //undefined
console.log('%c%s', 'color:red', 'data :' + this.$data); //已被初始化
}
beforeMount() {
console.group('------beforeMount挂载前状态------');
console.log('%c%s', 'color:red', 'el :' + this.$el); //已被初始化 虚拟dom
console.log('%c%s', 'color:red', 'data :' + this.$data); //已被初始化
}
mounted() {
console.group('------mounted 挂载结束状态------');
console.log('%c%s', 'color:red', 'el :' + this.$el); //已被初始化
console.log('%c%s', 'color:red', 'data :' + this.$data); //已被初始化
}
------beforeCreate创建前状态------
el :undefined
data :undefined
------created创建完毕状态------
el :undefined
data :[object Object]
------beforeMount挂载前状态------
el :undefined
data :[object Object]
------mounted 挂载结束状态------
el :[object HTMLElement]
data :[object Object]
网友评论