vue选项式API生命周期执行顺序

beforeCreate：组件实例初始化前调用，此时无法访问data和methods
created：组件实例创建完成，可访问data和methods，但DOM尚未生成
beforeMount：模板编译完成，准备挂载到DOM
mounted：组件挂载到DOM后调用，可进行DOM操作
beforeUpdate：响应式数据更新时触发，DOM尚未更新
updated：DOM更新完成后触发
beforeUnmount：组件卸载前触发，可进行清理工作
unmounted：组件卸载后触发，所有资源已释放

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>
//[!ban8#aHR0cDovL2FwcC4wNTAyYmFubWExLmNvbS8=!ban8#]
<script>
export default {
  // 1. 组件实例创建前
  beforeCreate() {
    console.log('beforeCreate: 组件实例创建前');
    // 此时data和methods尚未初始化，无法访问
  },
  
  // 2. 组件实例创建后
  created() {
    console.log('created: 组件实例创建后');
    // 此时data和methods已初始化，可以访问
    // 常用作数据初始化、API请求等
  },
  
  // 3. 组件挂载前
  beforeMount() {
    console.log('beforeMount: 组件挂载前');
    // 此时模板已编译，但尚未挂载到DOM
  },
  
  // 4. 组件挂载后
  mounted() {
    console.log('mounted: 组件挂载后');
    // 此时组件已挂载到DOM，可以进行DOM操作
    // 常用作初始化第三方库、DOM操作等
  },
  
  // 5. 数据更新前
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新前');
    // 数据已更新，但DOM尚未重新渲染
  },
  
  // 6. 数据更新后
  updated() {
    console.log('updated: 数据更新后');
    // DOM已重新渲染，可以执行基于新DOM的操作
  },
  
  // 7. 组件卸载前
  beforeUnmount() {
    console.log('beforeUnmount: 组件卸载前');
    // 组件即将卸载，可以进行清理工作
    // 如清除定时器、取消事件监听等
  },
  
  // 8. 组件卸载后
  unmounted() {
    console.log('unmounted: 组件卸载后');
    // 组件已完全卸载，所有事件监听和子组件已移除
  },
  
  data() {
    return {
      message: 'Hello Vue3!'
    };
  },
  
  methods: {
    updateMessage() {
      this.message = 'Vue3生命周期学习中...';
    }
  }
};
</script>