Vue的生命周期

Vue的生命周期
Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程，这就是Vue的生命周期。
在这个过程中Vue实例定义了每个阶段执行的函数，就是生命周期函数，生命周期函数又叫做钩子函数，因为过程都是分一个阶段一个阶段的并且都是相连的。

生命周期->看成是一个自执行函数
创建阶段->挂载阶段->更新阶段->销毁阶段

• beforeCreate 创建阶段
  实例初始化之前，在这个阶段还不能使用data和methods

var vm = new Vue({
   el:"#app",
   data:{
      msg:"hello world"
   },
   beforeCreate(){
      console.log(this.msg)//undefined
   }
})

• created 创建后
  创建结束的时候，Vue实例的data和methods就能正常使用了
  但是这个阶段，模板还未进行编译

<p id="con">{{msg}}</p>

var vm = new Vue({
   el:"#app",
   data:{
      msg:"hello world"
   },
   created(){
      console.log(this.msg)//hello world
      let con = docuemnt.getElementById("con")
      console.log(con.innerHTML)//{{msg}}
   }
})

• beforeMount 挂载阶段
  挂载之前，在这个阶段模板进行编译，生成一个虚拟DOM，存在内存中，页面中显示的还是模板语法

var vm = new Vue({
   el:"#app",
   data:{
      msg:"hello world"
   },
   beforeMount(){
      console.log(con.innerHTML)//{{msg}}
   }
})

• mounted 挂载后
  在这个阶段内存中编译好的虚拟DOM被真实的替换到浏览器页面中

var vm = new Vue({
   el:"#app",
   data:{
      msg:"hello world"
   },
   mounted(){
      console.log(con.innerHTML)//hello world
   }
})

• beforeUpdate 更新阶段
  数据更新之前指的是视图上数据的更新前
  数据更新之前函数中data里的数据已经发生改变，视图还没有更新

<p id = "com">{{msg}}</p>
<button @click="change">改变</button>

var vm = new Vue({
   el:"#app",
   data:{
      msg:"hello world"
   },
   beforeUpdate(){
      console.log("数据更新之前"+this.msg)//你好
      console.log("数据更新之前视图上的数据"+con.innerHTML)//hello world
   },
   methods:{
      change(){
         this.msg="你好"
      }
   }
})

• updated 更新后
  数据更新之后视图中的数据也发生变化，视图和data保持一致

var vm = new Vue({
   el:"#app",
   data:{
      msg:"hello world"
   },
   updated(){
      console.log("数据更新之后"+this.msg)//你好
      console.log("数据更新之后视图上的数据"+con.innerHTML)//你好
   },
   methods:{
      change(){
         this.msg="你好"
      }
   }
})

• beforeDestory 销毁阶段

var vm = new Vue({
   el:"#app",
   data:{
      msg:"hello world"
   },
   beforeDestroy(){
      console.log("销毁之前")
   }
})

• destoryed 销毁后
  点击exit按钮的时候执行vm.$destroy()，这个方法的作用是销毁Vue实例。
  销毁之后Vue实例中的data、methods\过滤器等功能都不再起作用。

<p id="con">{{msg}}</p>
<button id="exit">销毁</button>

var vm = new Vue({
   el:"#app",
   data:{
      msg:"hello world"
   },
   beforeDestroy(){
      console.log("销毁之前")
   },
   destroy(){
      console.log("销毁之后")
   }
})
var btn = document.getElementById("exit");
btn.onclick = ()=>{
   vm.$destroy()
}