vue的生命周期

今天我们了解一下vue实例的生命周期，具体去了解一下生命周期重要的几个阶段！

beforeCreate阶段

这个阶段，是对vue实例进行初始化之后，在data、methods和watch等选项配置之前调用。

created阶段

这个阶段，实例已经对选项进行了处理，data（数据观测）、computed（计算属性）、methods（方法）、watch（监听）等选项已经被配置，但$el属性还不能使用。

beforeMount阶段

这个阶段，还为挂载实例，也无法对DOM进行操作，向比与created阶段，只多了一个 $el属性。
添加 $el属性首先判断实例是否指定了el选项，如果没有指定则调用vm. $moint(el)指定 $el属性的值；然后再判断实例中是否存在template选项，如果有则使用template选项中的内容，如果没有则使用外面提供的HTML。
判断完成之后，开始编译模板，把data选项中的数据和vue语法声明的模板编译成浏览器可读取的HTML。

Mounted阶段

这个阶段，在将实实例挂载之后调用，其中已经el的值替换成$el。在这个钩子函数中通过ajax访问数据库，对数据进行初始化。

beforeUpdate阶段

这个阶段，是在实例已经挂载之后，且页面上数据被修改，在更新之前被调用，如果在这个函数中去修改数据则不会额外触发。

Updated阶段

这个阶段，是在实例已经挂载之后，且页面被重新渲染之后调用，在这个钩子函数调用时，不能更改实例的数据，这样容易导致死循环。

beforeDestroy阶段

这个阶段，是在实例化对象销毁之前调用，且这个时候vue实例完全可用。

destroyed阶段

这个阶段，是在vue实例销毁之后调用，调用这个阶段时，vue实例的所有指令已经被解除，所有子例已经被销毁

看完上面的内容，可能大家对vue的生命周期有了一点了解。我们可以将vue的生命周期分为四个阶段：1、vue实例的初始化，2、vue实例的挂载，3、vue实例数据的修改，4、vue实例的销毁。现在我们通过一个具体的实例去看看上述几个阶段：

    <div id="app">
        <p>请看控制台了解vue生命周期</p>
        {{ count }}
    </div>
    <script>
        Vue.config.productionTip = false;
        let vm = new Vue({
            el: "#app",
            data: {
                count: 0
            },
            beforeCreate() {
                console.log('----------开始执行beforeCreate----------');
                console.log("$el：" + this.$el);
                console.log("$data：" + this.$data);
                console.log("data.count：" + this.count);
            },
            created() {
                console.log('----------created----------');
                console.log("$el：" + this.$el);
                console.log("$data：" + this.$data);
                console.log("data.count：" + this.count);
            },
            beforeMount() {
                console.log('----------beforeMount----------');
                console.log("$el：" + this.$el);
                console.log("$data：" + this.$data);
                console.log("data.count：" + this.count);
            },
            mounted() {
                console.log('---------- mounted----------');
                console.log("$el：" + this.$el);
                console.log("$data：" + this.$data);
                console.log("data.count：" + this.count);
            },
            beforeUpdate() {
                console.log('---------- beforeUpdate----------');
                console.log("$el：" + this.$el);
                console.log("$data：" + this.$data);
                console.log("data.count：" + this.count);
            },
            updated() {
                console.log('---------- updated----------');
                console.log("$el：" + this.$el);
                console.log("$data：" + this.$data);
                console.log("data.count：" + this.count);
            },
            beforeDestroy() {
                console.log('---------- beforeDestroy----------');
                console.log("$el：" + this.$el);
                console.log("$data：" + this.$data);
                console.log("data.count：" + this.count);
            },
            destroyed() {
                console.log('---------- destroyed----------');
                console.log("$el：" + this.$el);
                console.log("$data：" + this.$data);
                console.log("data.count：" + this.count);
            }
        })
    </script>

当页面初始化时默认显示：

当在控制台修改count的值时：

当在控制台通过==vm.$destroy()==方法销毁实例时：