vue学习生命周期篇(二)

1 (创建)第一个生命周期函数beforeCreate

beforeCreate(){},

• 创建了一个空的vue实例
• data和methods还没有被初始化(即不能访问)

2 (创建)第二个生命周期函数created

 created(){},

• data和methods已经被初始化(可以调用和操作)

3 (创建)第三个生命周期函数beforeMount

beforeMount(){},

• 开始编译模板
• 执行vue中指令,在内存中生成一个模板字符串
• 将模板字符串渲染为内存中DOM
• 模板编译完成,保存在内存中

4 (创建)第四个生命周期函数(实例完全创建好)mounted

mounted(){},

• 将内存中编译好的模板已经挂载到页面
• 可以利用插件操作DOM节点
• 如果没有修改,此实例创建成功

5 (执行)第五个生命周期函数beforeUpdate

• 触发条件:data发生改变

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更好用)