1. 浏览器加载 index.html。
  2. 加载并执行 main.js。
  3. 初始化 Vue 实例并挂载到 DOM。
  4. 解析根组件 App.vue。
  5. 加载路由和状态管理(如果有)。
  6. 执行组件的生命周期钩子。
  7. 渲染子组件。
  8. 响应式数据更新,动态更新页面。

当 Vue 实例启动后,组件会经历以下生命周期钩子:

  • beforeCreate:实例初始化之前。
  • created:实例创建完成,数据和事件已初始化,但未挂载 DOM。
  • beforeMount:模板编译完成,但尚未挂载到 DOM。
  • mounted:组件挂载到 DOM,页面渲染完成。
  • updated:响应式数据更新后,重新渲染。(Vue 会自动更新 DOM)
  • destroyed:组件销毁时执行清理操作。