vue生命周期函数

什么是生命周期函数

1. 生命周期函数，相当于 vue实例在某个时间点会自动执行的函数
2. 官方解释：每个 Vue实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，

   

 <div id="app"></div>

var vm = new Vue({
  el: "#app",
  template:"<div>{{msg}}</div>",
  data: {
    msg:"hello world"
  },
  beforeCreate: function() { // 初始化完成前
    console.log('beforeCreate 创建前状态');
  },
  created: function() { // 初始化完成后
    console.log('created 创建完毕状态');
  },
  beforeMount: function() { 
    console.log(this.$el);
    console.log('beforeMount 挂载前状态');
  },
  mounted: function () {
    console.log(this.$el);
    console.log('mounted 挂载结束状态');
  },
  beforeDestroy: function () { // 通过vm.$destory()实现执行
    console.log('beforeDestory 销毁前状态');
  },
  destroyed: function () {
    console.log('destoryed 销毁后状态');
  },
  beforeUpdate: function () { 
    console.log('beforeUpdate 更新前状态');
  },
  updated: function () {
    console.log('updated 更新结束状态');
  }
})

总结

1. beforecreated：el 和 data 并未初始化
2. created:完成了 data 数据的初始化，el没有
3. beforeMount：完成了 el 和 data 初始化
4. mounted ：完成挂载

扩展：

1. beforecreate : 举个栗子：可以在这加个loading事件
2. created ：在这结束loading，还做一些初始化，实现函数自执行
3. mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
4. beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容