vue2生命周期

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

new Vue({
  // 在创建实例时调用，此时实例已完成数据观测 (data observer) 和 computed 属性、methods、watch 等配置的初始化，但尚未挂载到 DOM。
  beforeCreate() {
    console.log('beforeCreate: 实例刚被创建，数据观测 (data observer) 和事件配置还未开始');
  },

  // 在实例创建完成后调用，此时已完成 data 数据的观测等配置，但尚未挂载到 DOM。
  created() {
    console.log('created: 完成数据观测，属性和方法的运算，挂载之前');
  },

  // 在挂载开始之前被调用，相关的 render 函数首次被调用。
  beforeMount() {
    console.log('beforeMount: 模板编译完成，虚拟 DOM 创建完成，准备挂载到真实 DOM');
  },

  // 在挂载完成后调用，此时 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
  mounted() {
    console.log('mounted: 模板渲染成 html 后，挂载到页面上');
  },

  // 数据更新时调用，发生在虚拟 DOM 打补丁之前。
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新，虚拟 DOM 重新渲染之前');
  },

  // 数据更新后调用，组件 DOM 已经更新，可以执行依赖于 DOM 的操作。
  updated() {
    console.log('updated: 数据更新，虚拟 DOM 重新渲染并打补丁之后');
  },

  // 当组件实例销毁之前调用。在这一步，实例仍然完全可用。
  beforeDestroy() {
    console.log('beforeDestroy: 组件即将被销毁，清理定时器或取消事件监听');
  },

  // 组件实例销毁后调用。此时 Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {
    console.log('destroyed: 组件已被销毁，所有绑定和实例都被销毁');
  },

  // 渲染函数，Vue 会调用它以生成 vnode。
  render(h) {
    return h('div', 'Hello, Vue Lifecycle!');
  }
});

解释说明：

1. beforeCreate：实例刚被创建，此时 data 和 methods 还未初始化。
2. created：实例已经完成数据观测，属性和方法的运算，但尚未挂载到 DOM。
3. beforeMount：模板编译完成，虚拟 DOM 创建完成，准备挂载到真实 DOM。
4. mounted：模板渲染成 HTML 后，挂载到页面上。
5. beforeUpdate：数据更新，虚拟 DOM 重新渲染之前。
6. updated：数据更新，虚拟 DOM 重新渲染并打补丁之后。
7. beforeDestroy：组件即将被销毁，清理定时器或取消事件监听。
8. destroyed：组件已被销毁，所有绑定和实例都被销毁。

这些生命周期钩子可以帮助你在不同的阶段执行特定的操作，例如在组件挂载后进行 DOM 操作，或者在组件销毁前清理资源。