vue声明周期

一个组件从开始到销毁所经历的各种状态，就是一个组件的生命周期，

Vue在执行过程中会自动调用生命周期钩子函数，只需要调用这些钩子函数即可

一：挂载阶段

beforeCreat 数据劫持之前被调用，无法访问mothods,data,computed上的方法和数据

created        实例已经创建完成之后被调用， 但挂在阶段还没有开始，$el属性不可见，

                    常用于ajax发送请求获取数据

beforeMounted 在挂载开始之前被调用

mounted       vue实例已经挂载在页面中，可以获取el中的DOM元素，进行DOM操作

二：更新阶段

beforeUpdated 更新数据之前调用

updated        组件DOM已经更新

三：销毁阶段

beforeDestroy实例销毁之前调用，这一步 实例任然可以用

destroyed       Vue实例销毁后调用

    new Vue({
        el:"#app",
        data:{
            data:"hello",
            info:"msg"
        },
        //数据没有 元素没有
        beforeCreate:function(){
            console.log("创建前========")
            console.log(this.data)
            console.log(this.$el)
        },
        //数据有 元素没有
        created:function(){
            console.log("已创建========")
            console.log(this.info)
            console.log(this.$el)
        },
        //数据有 元素有 虚拟dom
        beforeMount:function(){
            console.log("mount之前========")
            console.log(this.info)
            console.log(this.$el)
        },
        //数据有 元素有，真实dom
        mounted:function(){
            console.log("mounted========")
            console.log(this.info)
            console.log(this.$el)
        },
        beforeUpdate:function(){
            console.log("更新前========");
        },
        updated:function(){
            console.log("更新完成========");
        },
        beforeDestroy:function(){
            console.log("销毁前========")
            console.log(this.info)
            console.log(this.$el)
        },
        destroyed:function(){
            console.log("已销毁========")
            console.log(this.info)
            console.log(this.$el)
        }
    })

 

• beforeCreate :加载loading事件
• created :结束loading，还做一些初始化，实现函数自执行
• mounted :在这发起axios请求，拿回数据，配合路由钩子做一些事情
• beforeDestory： destoryed :当前组件已被删除，清空相关内容
  综上：建议你把页面进入出现加载框写在beforeCreate,请求接口数据写在created,