Vue生命周期(lifecycle)

由于博客内容为空,暂无法提供包含关键信息的摘要。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


         

 

### Vue.js 组件生命周期钩子执行顺序 当一个Vue组件实例被创建时,它会经历一系列的初始化过程——例如设置数据监听、编译模板、挂载到DOM以及处理更新。这些不同阶段由特定的生命周期钩子来表示,在开发期间可以利用它们来进行自定义操作。 #### 创建阶段 - **beforeCreate**: 实例刚完成初始化之后立即调用,此时还未开始挂载,`data` 和 `events` 还未准备就绪[^1]。 - **created**: 在实例创建完成后立刻调用,此时已经完成了数据观测 (data observer),属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。 #### 挂载阶段 - **beforeMount**: 在挂载开始之前被调用,相关的 render 函数首次被调用。 - **mounted**: 当挂载结束并把新创建的 vm.$el 替换了 el 参数指定的目标元素后调用。注意在这个时刻,所有的指令已经被解析并且绑定到了相应的节点上,但是还没有进行第一次 DOM 更新。 #### 更新阶段 每当状态变化引起重新渲染时都会触发以下两个周期: - **beforeUpdate**: 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。 - **updated**: 由于响应式依赖改变而引起的视图更新完毕后调用。该钩子不会因为初始渲染而调用;只会在后续的数据更改导致界面刷新的时候才会触发。 #### 销毁阶段 最后是销毁时期,分为两部分: - **beforeDestroy**: 实例即将被销毁前调用。在这一步中仍然能完全使用整个 Vue 实例及其资源。通常用于清理定时器或取消事件订阅等任务。 - **destroyed**: 清理工作全部做完后的最后一个生命期钩子。此时所有与之关联的观察者都已被删除,所有的子组件也都被卸载/销毁掉。 对于带有路由功能的应用程序来说,除了上述标准的生命周期外还有额外的一组专门针对页面切换行为设计的导航守卫机制: - 路由进入前置条件(`beforeEach`) -> 失活组件离开守卫 (`beforeRouteLeave`) -> 同步路由组件加载 -> 新激活组件内 `beforeRouteEnter` 钩子 -> 全局解析守卫 (`beforeResolve`, 版本 >=2.5) -> 导航确认 -> 全局后置钩子 (`afterEach`) -> 视图中的组件收到新的 props 并触发其自身的生命周期钩子(如 `beforeUpdate`, `updated`). ```mermaid graph TD; A[Start Navigation] --> B{Global beforeEach}; B --> C(Component beforeRouteLeave); C --> D(Router async components resolved); D --> E(Component beforeRouteEnter/beforeRouteUpdate); E --> F(Global beforeResolve); F --> G(Navigation confirmed); G --> H(DOM updated & Component Lifecycle Hooks Triggered); H --> I{Global afterEach}; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值