Vue.js的生命周期有哪些？

Vue 实例在被创建时,会经过一系列的初始化过程,例如需要设置数据监听、编译模板、将实例挂载到 DOM 等。这些过程对应的就是生命周期函数。

Vue 的生命周期可分为三个阶段:

1.初始化阶段:beforeCreate、created、beforeMount、mounted

• beforeCreate:实例刚在内存中被创建出来,未初始化 injections 和 data 等。
• created:实例已经创建完成,data、computed 等都已被初始化好,这时候还未挂载,$el 属性目前不可见。
• beforeMount:模板渲染之前调用,此时 $el 属性还不存在。
• mounted:模板渲染完成,所有子组件也都渲染好了,此时可以通过 DOM API 访问数据。
• 
  2. 更新阶段:beforeUpdate、updated

• beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。
• updated:有新的虚拟 DOM,在这次更新之后调用。
• 
  3.销毁阶段:beforeDestroy、destroyed

• beforeDestroy:实例销毁之前调用,这时候实例是完全可用的。
• destroyed:实例销毁后调用,组件相关的所有东西都会被销毁。
  例如:

new Vue({
  data() {
    return {
      msg: 'Hello'
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() { 
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() { 
    console.log('destroyed')
  }
})

生命周期函数的调用顺序是:

beforeCreate -> created -> beforeMount -> mounted
-> (beforeUpdate -> updated) *   -> beforeDestroy -> destroyed

所以,Vue 实例在各个生命周期会有相应的初始化操作和清理操作,开发者可以搭配这些生命周期函数进行相应的处理,以实现一些具体的需求。