Vue的生命周期

Vue官网给出的关于生命周期的图示：

var vm = new Vue({
    el:"#app",
    data:{
    	num : 10
    },
    beforeCreate(){
        console.log("beforeCreate")
        console.log(this.$data)
    },
    created(){
        console.log("created")
        console.log(this.$data)
    },
    beforeMount(){
        console.log("beforeMount")
        console.log(this.$data)
        console.log(this.$el)
    },
    mounted(){
        console.log("mounted")
        console.log(this.$el)
    },
    beforeUpdate(){
        console.log("beforeUpdate")
    },
    updated(){
        console.log("updated")
    },
    beforeDestroy(){
        console.log("beforeDestroy")
    },
    destroyed(){
        console.log("destroyed")
    }
})

beforeCreate 实例创建前
实例组件刚创建，元素DOM和数据都还没有初始化

created 实例创建
数据已经初始化完成，方法也已经可以调用，但是DOM未渲染。此时可以调用ajax获取数据。

beforeMount 挂载前
DOM未完成挂载，数据也初始化完成，但是数据的双向绑定并不能显示数据。

mounted挂载
数据和DOM都完成挂载，上一个周期的双向绑定进行数据渲染。

beforeUpdate 更新前
只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据。

Updated 更新
只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。

beforeDestroy 销毁前
这个周期是在组件销毁之前执行，可以做一些路由离开时候的操作，因为这个周期里面还可以使用data和method。

destroy销毁
销毁这个生命周期执行过后 实例的属性和方法就不能再用了。
vm.$destroy() 还是可以看到vue的实例，但是修改数据页面不变，因为被卸载了。