Vue的生命周期

生命周期：每个 Vue 实例在被创建时都要经过一系列的初始化过程。

官网的生命周期图示：

同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

 var vm = new Vue({
     el:"#app",
     data:{
         name : "wh",
         age : 21,
         msg : "哈哈哈哈",
     },
     methods:{
         abc(){}
     },
     beforeCreate(){ //实例刚在内存中被创建出来
     //在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
         console.log("beforeCreate")
         console.log(this)
         console.log(this.$data) //undefined
         console.log(this.methods);//undefined
     },
     created(){//实例已经在内存中创建好，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
     	//可以调用ajax获取数据
         console.log("created")
         console.log(this.$data)
     },
     beforeMount(){//完成了模板的编译，但是还没有挂载到页面中进行渲染
         console.log("beforeMount")
         console.log(this)
         console.log(this.$data)
         console.log(this.$el)
     },
     mounted(){ //已经将编译好的模板，挂载到了页面指定的容器中显示渲染
         // ajax
         console.log(this.$el)
     },
     beforeUpdate(){ 
     //状态更新之前执行此函数,此时data中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
         console.log("beforeUpdate")
     },
     updated(){
     //实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面重新渲染DOM节点！
         console.log("updated")
     },
     beforeDestroy(){//实例销毁之前调用。在这一步，实例仍然完全可用。
         console.log("beforeDestroy")
     },
     destroyed(){
     //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也会被销毁。 
         console.log("destroyed")
         // vm.$destroy()   还是可以看到vue的实例，但是修改数据页面不变，因为被销毁了
     }
 })