生命周期
**生命周期(生命周期钩子,生命周期回调函数,生命周期函数):**指的就是这些特殊的函数,会在特殊的时间点调用这些函数
-
生命周期函数的名字不可修改,但函数的具体内容是程序员根据需求编写的
-
生命周期函数中的this指向的是vm或组件实例对象
vm的生命周期
将要创建===>调用beforeCreate函数
创建完毕===>调用created函数
将要挂载(重要)===>调用beforeMount函数
挂载完毕===>调用mounted函数
将要更新===>调用beforeUpdate函数
更新完毕===>调用updated函数
将要销毁(重要)===>调用beforeDestroy函数
销毁完毕===>调用destroyed函数
示例:
mounted函数:Vue完成模板的解析并把初始的真实的DOM元素放入页面后(挂载完毕)调用
生命周期_挂载流程
-
创建Vue实例
-
初始化事件,生命周期
-
**beforeCreate()**函数被调用
-
数据代理还没开始,无法通过vm访问data中的数据,methods方法
-
-
初始化数据监测,数据代理
- **created()**函数被调用
- 可以访问vm中的data数据,methods中的方法
-
解析模板
- 判断是否有el选项,有的话解析el。没有el选项的话在外部寻找是否有vm.$mounted(el),有的话解析el,没有的话查看是否有template选项,解析template选项。
- 此阶段Vue开始解析模板,生成虚拟DOM(内存中),页面还显示不了解析好的内容
- **beforeMount()**函数被调用,页面呈现的是未经Vue编译的DOM元素,所有对DOM的操作最终不奏效
-
将内存中的虚拟DOM($el)转为真实DOM(el)插入页面
- **mounted()**函数被调用
- 页面中呈现的是经过Vue编译的DOM,对DOM的操作均有效
生命周期_更新流程
- 数据更新
- **beforeUpdate()**函数被调用
- 数据是新的,但页面是旧的,即页面尚未和数据保持同步
- 根据数据生成新的虚拟DOM
- **updated()**函数被调用
- 新的虚拟DOM和旧的虚拟DOM进行比较,最终完成页面更新(Model—>View)
- 数据是新的,页面也是新的,即页面和数据保持同步
生命周期_销毁流程
当调用了vm.$destroy()则开始销毁流程
- 销毁流程开始
- **beforeDestroy()**函数被调用
- 此时vm中所有data,methods,指令等等都处于可用状态,马上要执行销毁过程(但是对数据的修改不会触发更新)
- 一般在此阶段可以关闭定时器,取消订阅消息,解绑自定义事件(销毁不会解绑原生DOM上的事件)等收尾操作例:给button绑定@click事件,那么Vue会给
- 销毁流程结束
- **destroyed()**函数被调用
<div id="root">
<h2 :style="{opacity}">改变透明度</h2>
<button @click="stop">停止变化</button>
</div>
<script>
Vue.config.productionTip = false
let vm=new Vue({
el:'#root',
data:{
opacity:1,
},
methods: {
stop(){
vm.$destroy();
}
},
//挂载完毕,开启定时器修改透明度
mounted() {
//这里将定时器存储到vm上,方便使用
this.timer=setInterval(() => {
this.opacity-=0.01;
if(this.opacity<=0){
this.opacity=1;
}
}, 16);
},
//销毁结束之前清除定时器
//为什么不在stop函数里面清除定时器?
//因为stop函数相当于自杀,如果发生他杀的行为定时器也需要清除,所以在vm被销毁前清除定时器
beforeDestroy() {
clearInterval(this.timer);
},
})
</script>