vue生命周期

 // js部分
    
"app">
        <h1>{{msg}}h1>
        <button @click="change">改变msgbutton>
        <button @click="destroy">销毁Vue实例button>
        <h1>{{time}}h1>
    

1. beforeCreate：Vue实例化对象创建之前，实例化对象创建之前是获取不到data里面的数据的

 //Vue实例化对象创建之前
            // 最先执行的生命周期
            beforeCreate() {
                console.log("Vue实例化对象创建之前");//Vue实例化对象创建之前
                console.log(this.msg); // undefined
            },

 created：Vue实例化对象创建之后，实例化对象创建之后可以获取data里面的数据 

                实例化对象创建之后不可以获取到dom包括根节点

             ★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中

  /* Vue实例化对象创建之后 */
            created() {
                /* 实例化对象创建之后可以获取data里面的数据 */
                /* 实例化对象创建之后不可以获取到dom包括根节点 */
                console.log('created',this.msg,this.$el)
                /* ★一般在created里面调用接口把接口里面的数据赋值给到Vue的data中 */
                // this.timeId = setInterval(()=>{
                //     this.time++;
                //     console.log(this.time)
                // },500)
            },

beforeMount：Vue的dom挂载之前，beforeMount可以获取到节点，但是不能把data中的数据渲染在dom节点中

 beforeMount() {
                /* dom挂载之前可以获取到根节点 */
                /* beforeMount还没有把data中的数据渲染到dom节点上 */
                console.log('beforeMount',this.$el)
            },

mounted：Vue的dom挂载之后，mounted已经把data中的数据渲染到了dom节点上

               ★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素

 /* Vue的dom挂载之后 */
            mounted() {
                /* mounted已经把data中的数据渲染到了dom节点上 */
                console.log('mounted',this.$el)
                /* ★一般在获取dom节点操作要放在mounted中执行，例如echarts中获取根元素 */
            },

 beforeUpdate： Vue的data值更新前，当我把Vue实例中的data中的值改变了会触发                 beforeUpdate 和updated，顺序上 beforeUpdate执行顺序优先于updated

  /* Vue的data值更新前 */
            /* 当我把Vue实例中的data中的值改变了会触发beforeUpdate和updated */
            /* 顺序上 beforeUpdate执行顺序优先于updated  */
            beforeUpdate() {
                console.log('beforeUpdate',this.msg,this.$el)
            },

updated：Vue的data值更新后

   updated() {
                console.log('updated',this.msg,this.$el)
            },

beforeDestroy：Vue组件销毁前，在调用$destroy()方法的时候 会执行下面的两个钩子函数

                          执行顺序上beforeDestroy优先于destroyed执行

                        ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可    以使用

  /* Vue组件销毁前 */
            /* 在调用$destroy()方法的时候 会执行下面的两个钩子函数 */
            /* 执行顺序上beforeDestroy优先于destroyed执行  */
            /* ★beforeDestroy和destroyed的一个使用场景是在销毁定时器节约内存的时候都可以使用 */
            beforeDestroy() {
                console.log('beforeDestroy',this.msg,this.$el)
            },

destroyed：Vue组件销毁后

 destroyed() {
                console.log('destroyed',this.msg,this.$el)
                clearInterval(this.timeId)
            },

整体代码：

"app">
        <h1>{{msg}}h1>
        <button @click="change">改变msgbutton>
        <button @click="destroy">销毁Vue实例button>
        <h1>{{time}}h1>