Vue生命周期

Vue生命周期有四个阶段，八个函数：

  beforeCreate(){
    console.log("beforeCreate:创建之前")
  },
  created(){
    console.log("created:创建完成")
  },
  beforeMount(){
    console.log("beforeMount:渲染之前")
  },
  mounted(){
    console.log("mounted:渲染完成")
  },
  beforeUpdate(){
    console.log("beforeUpdate:更新之前")
  },
  updated(){
    console.log("updated:已更新")
  },
  beforeUnmount(){
    console.log("beforeUnmount:卸载之前")
  },
  unmounted(){
    console.log("unmounted:已卸载")
  }

 这些函数和 data 是同级的：

 

当进入页面时：

 

进行创建和渲染

设置一个值，并创建一个按钮来触发事件改变这个msg的值：

 

点击之后：

 

可以发现msg的值改变了，同时也触发了生命周期中的更新的函数。