Vue生命周期

生命周期

**生命周期（生命周期钩子，生命周期回调函数，生命周期函数）：**指的就是这些特殊的函数，会在特殊的时间点调用这些函数

• 生命周期函数的名字不可修改，但函数的具体内容是程序员根据需求编写的

• 生命周期函数中的this指向的是vm或组件实例对象

vm的生命周期

将要创建===>调用beforeCreate函数

创建完毕===>调用created函数

将要挂载（重要）===>调用beforeMount函数

挂载完毕===>调用mounted函数

将要更新===>调用beforeUpdate函数

更新完毕===>调用updated函数

将要销毁（重要）===>调用beforeDestroy函数

销毁完毕===>调用destroyed函数

示例：

mounted函数：Vue完成模板的解析并把初始的真实的DOM元素放入页面后（挂载完毕）调用

生命周期_挂载流程

1. 创建Vue实例

2. 初始化事件，生命周期

   • **beforeCreate()**函数被调用

   • 数据代理还没开始，无法通过vm访问data中的数据，methods方法

3. 初始化数据监测，数据代理

   • **created()**函数被调用
   • 可以访问vm中的data数据，methods中的方法

4. 解析模板

   • 判断是否有el选项，有的话解析el。没有el选项的话在外部寻找是否有vm.$mounted(el)，有的话解析el，没有的话查看是否有template选项，解析template选项。
   • 此阶段Vue开始解析模板，生成虚拟DOM（内存中），页面还显示不了解析好的内容
   • **beforeMount()**函数被调用，页面呈现的是未经Vue编译的DOM元素，所有对DOM的操作最终不奏效

5. 将内存中的虚拟DOM（$el）转为真实DOM（el）插入页面

   • **mounted()**函数被调用
   • 页面中呈现的是经过Vue编译的DOM，对DOM的操作均有效

生命周期_更新流程

1. 数据更新
   • **beforeUpdate()**函数被调用
   • 数据是新的，但页面是旧的，即页面尚未和数据保持同步
2. 根据数据生成新的虚拟DOM
   • **updated()**函数被调用
   • 新的虚拟DOM和旧的虚拟DOM进行比较，最终完成页面更新（Model—>View）
   • 数据是新的，页面也是新的，即页面和数据保持同步

生命周期_销毁流程

当调用了vm.$destroy()则开始销毁流程

1. 销毁流程开始
   • **beforeDestroy()**函数被调用
   • 此时vm中所有data,methods,指令等等都处于可用状态，马上要执行销毁过程（但是对数据的修改不会触发更新）
   • 一般在此阶段可以关闭定时器，取消订阅消息，解绑自定义事件（销毁不会解绑原生DOM上的事件）等收尾操作例：给button绑定@click事件，那么Vue会给
2. 销毁流程结束
   • **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>