深入理解 Vue 2 生命周期：揭秘每一个阶段的奥秘

在Vue 2中，组件的生命周期可以分为四个主要阶段：创建（Creation）、挂载（Mounting）、更新（Update）和销毁（Destruction）。

1. 创建阶段：

   • beforeCreate：在实例初始化之后，数据观测(data observer)和事件/watcher 设置之前被调用。
   • created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

2. 挂载阶段：

   • beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
   • mounted：实例挂载到DOM上之后调用，这时候组件已经可见。

3. 更新阶段：

   • beforeUpdate：在数据更新之前被调用，此时DOM中的显示数据还是旧的。
   • updated：在数据更新之后DOM已经刷新，这个阶段被调用。

4. 销毁阶段：

   • beforeDestroy：在实例销毁之前调用，此阶段实例仍然完全可用。
   • destroyed：Vue 实例销毁后调用，此时所有的事件监听器会被移除，所有的子实例也会被销毁。

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate() {
    console.log('beforeCreate: 实例完全被创建出来之前。')
  },
  created() {
    console.log('created: 实例已经创建完成。')
  },
  beforeMount() {
    console.log('beforeMount: 挂载开始之前。')
  },
  mounted() {
    console.log('mounted: 实例挂载到DOM上。')
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新之前。')
  },
  updated() {
    console.log('updated: 数据更新之后。')
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁之前。')
  },
  destroyed() {
    console.log('destroyed: 实例销毁之后。')
  }
})

在这个例子中，我们创建了一个Vue实例，并在不同的生命周期钩子中打印了信息。这有助于理解每个阶段的执行顺序和内容。