vue2 生命周期

// Vue 2 生命周期示例代码

new Vue({
  // 创建 Vue 实例时的选项
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate() {
    console.log('beforeCreate: ', this.$el); // 此时 el 和 data 都未初始化，this.$el 为 undefined
  },
  created() {
    console.log('created: ', this.$el, this.message); // 此时 data 已经初始化，但 el 还未挂载
  },
  beforeMount() {
    console.log('beforeMount: ', this.$el); // 此时 el 已经被创建，但还未挂载到 DOM 中
  },
  mounted() {
    console.log('mounted: ', this.$el); // 此时 el 已经挂载到 DOM 中，可以操作 DOM 元素了
  },
  beforeUpdate() {
    console.log('beforeUpdate: ', this.$el, this.message); // 数据更新前的状态
  },
  updated() {
    console.log('updated: ', this.$el, this.message); // 数据更新后的状态
  },
  beforeDestroy() {
    console.log('beforeDestroy: ', this.$el); // 实例即将被销毁，还可以访问 el 和 data
  },
  destroyed() {
    console.log('destroyed: ', this.$el); // 实例已经被销毁，无法再访问 el 和 data
  }
});

<!-- HTML -->
<div id="app">
  <p>{{ message }}</p>
</div>

解释说明：

1. beforeCreate：实例刚刚被创建，data 和 el 都还没有初始化。
2. created：实例已经创建完成，data 已经初始化，但 el 还没有挂载。
3. beforeMount：模板编译完成，el 已经创建，但还未挂载到 DOM 中。
4. mounted：实例已经挂载到 DOM 中，可以操作 DOM 元素。
5. beforeUpdate：数据更新之前的状态。
6. updated：数据更新之后的状态，DOM 已经更新。
7. beforeDestroy：实例即将被销毁，还可以访问 el 和 data。
8. destroyed：实例已经被销毁，无法再访问 el 和 data。

通过这些生命周期钩子函数，可以在不同的阶段执行特定的操作。