一、引出生命周期

1、又名：生命周期回调函数、生命周期函数、生命周期钩子
2、他是什么？Vue在关键时刻帮我们调用的一些特殊名字的函数
3、生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
4、生命周期中的this指向的是 vm 或 组件实例化对象

二、声明周期图示

生命周期.png

三、分析生命周期

• 1、beforeCreate() ： 此时无法通过vm访问到data中的数据、methods中的方法

• 2、created() : 此时可以通过vm访问到data中的数据、methods中的方法

• 3、beforeMount() ：此时：
  (1)、页面呈现的是未经Vue编译的DOM结构
  (2)、所有对DOM的操作，最终都不奏效

• 4、mounted() ： 此时：
  (1)、页面呈现的是经过Vue编译的DOM
  (2)、对DOM的操作均有效（尽可能避免）
  至此初始化过程结束，一般在此进行：
  开启定时器、
  发送网络请求、
  订阅消息、
  绑定自定义事件等等初始化操作

• 5、beforeUpdate() ： 只要修改数据，就调用，
  此时：
  数据是新的，但页面是旧的，即：页面尚未和数据保持同步

• 6、updated() ：此时：数据是新的，页面也是新的，即：页面和数据保持同步
  根据新数据，生成新的虚拟DOM。随后与旧的虚拟DOM进行比较，最终完成页面更新

• 7、beforeDestroy() ： 此时：
  vm中的所有的data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器，取消订阅消息、解绑自定义事件等收尾操作

• 8、destroyed() ：销毁完毕

c5e6dbfecda347eda6ab16f59add6f3.png 06a4ce3aec418f44da616fd6c7f586e.png

四、 常用的生命周期钩子

1、mounted：发送ajax请求、启动定时器、绑定自定义属性、订阅消息等初始化操作
2、beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾工作

五、 关于销毁Vue实例

1、销毁后借助Vue开发者工具看不到任何信息
2、销毁后自定义事件会失效，但原来的DOM事件依然有效
3、一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

实例

<div id="root">
        <h2 :style="{ opacity }">欢迎学习Vue</h2>
        <button @click="stop">停止变换</button>
</div>
<script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

    //创建Vue实例
    new Vue({   //ViewModel
        el: '#root',
        data: {
            opacity: 1,
        },

        methods: {
            stop(){
                this.$destroy();
            }
        },
        // Vue完成模板的解析并把初始的真实的DOM元素放入页面后(挂载完毕)调用mounted
        // 生命周期函数
        mounted() {
            this.timer = setInterval(() => {
                this.opacity -= 0.01;
                if (this.opacity <= 0) this.opacity = 1;
            }, 16);
        },
        beforeDestroy() {
            console.log('vm即将销毁');
            clearInterval(this.timer)
        },
    });

</script>