向死而生：Vue的生命周期万物皆有生死，所以万物也皆有生命周期。什么是生命周期？用百度百科的话来解释，所谓生命周期即对

万物皆有生死，所以万物也皆有生命周期。什么是生命周期？

用百度百科的话来解释，所谓生命周期即对象从生到死，从摇篮到坟墓的过程，vue也毫不例外地拥有着生命周期。在使用vue的开发过程中，生命周期和它背后诸多的钩子函数是一个必须理解且时常会用到的一块内容。

生命周期图示

先看图(。・∀・)ノ

钩子函数

钩子函数是什么，从字面意思上不难看出，钩子函数首先得是一个函数（废话）

钩子函数可以简单理解为是一种系统在不同的阶断自动执行、用户无须干预的函数，Vue的生命周期是伴随着钩子函数的。上图左侧的“时间轴”即为伴随并构成Vue生命周期的钩子函数。它们分别是：

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

这些钩子函数的具体功能在上图中均有解释，在此就不再赘述。

看代码

我们调用了每一个钩子函数，并写了两个按钮“change”和“destroy”，它们的作用分别是更改a的值和销毁实例。

<body>
    <div id="app">
        <button @click="change()">change</button>
        <button @click="destroy()">destroy</button>
        {{a}}
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data() {
                return {
                    a: 1
                }
            },
            beforeCreate() {
                console.log("beferoCreate")
            },
            created() {
                console.log("created")
            },
            beforeMount() {
                console.log("beforeMount")
            },
            mounted() {
                console.log("mounted")
            },
            beforeUpdate() {
                console.log("beforeUpdate")
            },
            updated() {
                console.log("updated")
            },
            beforeDestroy() {
                console.log("beforeDestroy")
            },
            destroyed() {
                console.log("destroyed")
            },
            methods: {
                change() {
                    this.a ++
                },
                destroy() {
                    vm.$destroy()
                }
            }
        })
    </script>
</body>

运行结果，钩子函数自动按顺序依次执行

然后点击“change”按钮改变变量的值

最后点击“destroy”按钮

销毁实例后，再点击“change”按钮，会发现页面上的数字不会改变，此时它已经死亡，所以无法操作。

尾声

生命是一辆开往坟墓的单向列车，有生必有死，我们每个人都向死而生地活着，Vue也是。或许无法生如夏花般灿烂，死如秋叶般寂美，但生命的意义从来都不是结局会怎样，

而是在这班列车上沿途所见的风景，难道不是吗。

本文是学习过程中的小小总结，希望有所帮助。