生命周期

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

流程

初始化：生命周期、事件。数据代理还未开始。
beforeCreate()：生命周期函数。在这个函数中无法访问 vm._data 中的数据和 methods 中的方法。
初始化：数据监测、数据代理。
created()：生命周期函数。在这个函数和中可以访问 vm._data 中的数据和 methods 中的方法。
生成虚拟 DOM。
beforeMount()：生命周期函数。此时页面呈现的是未经 Vue 编译的 DOM 结构。所有对 DOM 的操作不奏效。
虚拟 DOM 转为真实 DOM
mounted()：生命周期函数。此时页面呈现的都是经过 Vue 编译后的 DOM 节点。至此初始化过程结束，可在这个生命周期函数中发起网络请求、开启定时器等操作。
beforeUpdate()：生命周期函数，此时的数据是新的，但页面是旧的。页面尚未和数据保持同步。
根据新数据生成新的虚拟 DOM，随后与旧的虚拟 DOM 进行比较，最终完成页面更新。（即：完成了 Model -> View 的更新）
updated()：生命周期函数。此时数据是新的，页面也是新的，页面和数据保持同步。
beforeDestroy()：生命周期函数，销毁 vm 前做的工作。此时 vm 身上所有的 data、methods、指令等，都处于可用状态，马上要执行销毁过程，一般在此阶段关闭定时器、解绑自定义事件等收尾操作。
destroyed()：生命周期函数，销毁 vm 后。

常用的生命周期函数

mounted()

程序的开始

html

<body>
    <div id="root">
        <h2 :style="{opacity}">Hello,SevenOne</h2>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            methods: {
                
            },
            mounted() {
                setInterval(() => {
                    this.opacity -= 0.01;
                    if(this.opacity <= 0) this.opacity = 1;
                },16)
            },
        })
    </script>
</body>

beforeDestroy()

程序的结束

html

<body>
    <div id="root">
        <h2 :style="{opacity}">Hello,SevenOne</h2>
        <button @click="stop">结束程序</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                opacity: 1
            },
            methods: {
                stop(){
                    this.$destroy();		// 自杀，自己调用死亡的生命周期
                }
            },
            mounted() {
                this.timer = setInterval(() => {
                    this.opacity -= 0.01;
                    if(this.opacity <= 0) this.opacity = 1;
                },16)
            },
            // 死亡生命周期
            beforeDestroy() {
                clearInterval(this.timer);
                console.log('程序结束');
            },
        })
    </script>
</body>

生命周期 ​

流程 ​

常用的生命周期函数 ​

mounted() ​

beforeDestroy() ​

生命周期

流程

常用的生命周期函数

mounted()

beforeDestroy()