Vue的生命周期

Mahe666

在使用Vue进行日常开发中，我们总有这样的需求，想在页面刚一加载出这个表格组件时，就发送请求去后台拉取数据，亦或者想在组件加载前显示个loading图，当组件加载出来就让这个loading图消失等等这样或那样的需求。

要实现这些需求，最重要的一点就是我怎么知道这个组件什么时候加载，换句话说我该什么时候向后台发送请求，为了解决这种问题，组件的生命周期钩子函数就应运而生。

代码示例

<div id="app">
    <h1></h1>
    <button @click="add">加</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            num:10
        },
        //组件实例创建之前
        beforeCreate() {
            console.log('beforeCreate 组件实例创建前');
        },
        //组件实例创建完毕
        created() {
            console.log('created 组件实例创建完毕');
        },
        //组件DOM挂载之前
        beforeMount() {
            console.log('beforeMount 组件DOM挂载前');
        },
        //组件DOM挂载完毕
        mounted() {
            console.log('mounted 组件DOM挂载完毕');
        },
        //组件数据更新之前
        beforeUpdate() {
            console.log('beforeUpdate 组件数据更新前');
        },
        //组件数据更新完毕
        updated() {
            console.log('updated 组件数据更新完毕');
        },
        //组件实例销毁之前
        beforeDestroy() {
            console.log('beforeDestroy 组件实例销毁前');
        },
        //组件实例销毁完毕
        destroyed() {
            console.log('destroyed 组件实例销毁完毕');
        },
        methods:{
            //改变数据，可以演示beforeUpdate与updated
            add(){
                this.num++;
            }
        }
    })
    //使用$destroy()销毁当前实例，可以演示beforeDestroy与destroyed
    //app.$destroy();
</script>

以上就是Vue中组件生命周期钩子函数执行的各个过程以及执行的时机，但是这些钩子函数到底该怎么用呢？针对前言中提出的需求我们又该怎么解决呢？在这里，给大家举个例子：

例如有一个表格组件：

我们想在表格加载之前显示个loading图，那么我们可以在组件实例创建之前的钩子函数 beforeCreate 里面将loading图显示。
当组件实例加载出来，我们可以在 created 钩子函数里让这个loading图消失。
当表格被加载好之后我们想让它马上去拉取后台数据，那么我们可以在组件DOM挂载之前的钩子函数 beforeMount 里面去发送请求。
从后台拉取的数据要绑定在DOM中，那么就必须要在组件DOM挂载完毕的钩子函数 mounted 里面去做。
表格中的数据在更新前和更新后，我们都需要做一个处理，那么这些工作就可以放在 beforeUpdate 和 updated 中去做。
当应用程序结束后，或组件实例准备销毁时，有一些善后处理的工作（比如释放资源）就可以放在 beforeDestroy 和 destroyed 中去做。