1 (创建)第一个生命周期函数beforeCreate
beforeCreate(){},
- 创建了一个空的vue实例
- data和methods还没有被初始化(即不能访问)
2 (创建)第二个生命周期函数created
created(){},
- data和methods已经被初始化(可以调用和操作)
3 (创建)第三个生命周期函数beforeMount
beforeMount(){},
- 开始编译模板
- 执行vue中指令,在内存中生成一个模板字符串
- 将模板字符串渲染为内存中DOM
- 模板编译完成,保存在内存中
4 (创建)第四个生命周期函数(实例完全创建好)mounted
mounted(){},
- 将内存中编译好的模板已经挂载到页面
- 可以利用插件操作DOM节点
- 如果没有修改,此实例创建成功
5 (执行)第五个生命周期函数beforeUpdate
beforeUpdate(){},
- data数据发生改变,取到新数据
- 页面尚未改变,数据为原来的
6 (执行)第六个生命周期函数updated
updated(){},
- 先根据data中新数据在内存中重新渲染DOM树
- 将内存中新DOM树渲染到页面(Model层到View层)
- 页面数据已更新
7 (销毁)第七个生命周期函数beforeDestroy
beforeDestroy(){},
- data, methods,过滤器,指令处于可用状态,尚未销毁
8 (销毁)第八个生命周期函数destroyed
destroyed(){}
- 组件完全被销毁,data,methods,过滤器,指令不可用
总结
- beforeCreate 创建前是指data和methods还未被初始化,可理解为创建了一个空的vue实例
- created 已创建 是指data和methods已经初始化,可理解为已经可以使用data 和methods
- beforeMount 挂载前 是指模板已经编译好,尚未挂载到页面,保存在内存中
- mounted 已挂载 是指挂载到页面,可理解为已经渲染到页面,若data不改变,此实例将完成创建
- beforeUpdate 更新前 是指触发了某个条件,即data改变,将模板重新编译,并保存在内存中,data已经更新
- updated 已更新 是指已经重新挂载到页面,实现了data(Model)–>view的更新
- beforeDestory 销毁前是指实例尚未销毁,data,methods,过滤器,指令等处于可用状态
- destoryed 已销毁是指实例已经销毁,data,methods,过滤器,指令等处于不可用状态
记忆
- create的对象是data和methods,是最早可以拿到数据的人created
- mount的对象是模板,是最早可以操作DOM元素的人mounted(可用插件控制)
- update的对象是data,随其变化而更改(专一,只关心data)
- destory的对象是实例,是最狠的,执行后所有指令,data,methods,过滤器等不能使用
拓展
- 有一个叫nextTick()的打破了上述原则,帮助created获取mounted的身份,即可以操作DOM元素
created(){
this.$nextTick(()=>{
console.log(document.getElementById("title"))
})
}
- 为什么会出现它?有什么用?
- created() 可以执行多次,即多次取数据
- mounted() 执行一次,即只挂载一次,不能取到最新的DOM元素
- nextTick() 监听所有的dom元素已经渲染完毕之后调用,即只要DOM元素发生变化就自动触发,只能在created中调用
- 所以出现最早的可以操作DOM元素的mounted这一原则将更改,created+nextTick组合是最早可以操作DOM元素的(似乎比mounted更好用)