Vue不同页面跳转时各页面生命周期的执行顺序

本文深入探讨Vue实例的初始化过程,解析生命周期钩子的运行时机,包括数据监听、模板编译及DOM更新。通过实例演示不同页面跳转时生命周期的执行顺序,纠正常见误解。

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

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM
等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

1、关于vue生命周期的理解 推荐之前看到的详解vue生命周期这一篇,讲得很详细也很易懂。
2、除了关于vue生命周期的详解 网上也有很多关于父子组件之间的生命周期执行顺序,推荐一个只有一张图便可以秒懂的文章关于vue父子、兄弟组件的生命周期顺序
上面两篇推荐只是vue生命周期的基础


Vue不同页面跳转时各页面生命周期的执行顺序

index页面可以直接跳转secondIndex 在跳转的过程中 这两个页面之间的生命周期执行顺序如下
在这里插入图片描述
之前一直以为先是index页面的beforeDestroy、destroyed生命周期函数执行完才会开始secondIndex页面的beforeCreate、created等,验证的事实是先新页面的beforeCreate、created、beforeMount,然后旧页面的beforeDestroy、destroyed,再然后新页面的mounted等。

<think>好的,我现在需要回答用户在UniApp中页面生命周期和组件生命周期执行顺序的问题。首先,我得回忆一下UniApp的相关知识,尤其是关于生命周期部分的内容。根据用户提供的引用资料,特别是引用[2]和[3],里面提到了Vue2项目下的生命周期顺序。 首先,页面生命周期包括onLoad、onShow、onReady等,而组件生命周期则有created、mounted、updated等。用户想知道它们的执行顺序是怎样的。我需要先整理页面加载顺序,然后是页面显示和隐藏的情况,还有数据更新的触发顺序。 在初次进入页面,根据引用[3],onLoad的候已经可以访问data和method了,这候可以发请求。接着是组件的created,然后是页面的onShow,之后是组件的mounted,最后是页面的onReady。这个顺序是否正确呢?需要确认引用中的信息。引用[2]给出的顺序页面父组件先触发onLoad,然后是子组件的created,接着是父组件的onShow,子组件的mounted,最后是父组件的onReady。所以页面生命周期和组件的生命周期确实有交叉执行的情况。 接下来是页面隐藏和再次显示的情况,比如跳转到其他页面再返回。这候应该触发页面的onHide,当返回触发onShow。而组件可能不会再次触发created或mounted,除非被销毁。需要确认UniApp中的组件在页面隐藏是否会销毁,或者保持状态。根据一般Vue的行为,组件可能在页面隐藏被保持,但需要根据UniApp的实际情况判断。引用中没有提到组件在页面隐藏的行为,可能需要假设组件未被销毁,所以再次显示不会触发created或mounted。 然后是数据更新顺序,当页面数据变化导致组件更新,应该是页面的onUpdate触发,然后组件的updated生命周期。或者是否有onUpdate这个钩子?根据引用[3]提到在页面数据更新,可能触发组件的更新。需要检查UniApp的文档是否有页面级别的onUpdate,或者是否指的是组件的updated钩子。可能用户提到的onUpdate是页面数据变化触发的,但根据标准Vue,数据更新会触发组件的beforeUpdate和updated钩子,而页面是否有对应的钩子可能需要确认。 另外,用户提供的引用[2]中的示例顺序显示,在进入页面顺序是:页面onLoad → 父组件created → 子组件created → 页面onShow → 父组件mounted → 子组件mounted → 页面onReady。这可能是一个具体的例子,需要说明一般情况下的顺序,以及父组件和子组件之间的关系。比如,父组件created在子组件created之前,而mounted则是父组件先于子组件吗?或者反过来?根据Vue的生命周期,父组件的mounted会在子组件的mounted之后,因为子组件需要先挂载完成,父组件才能完成挂载。但引用中的例子显示父组件mounted在子组件之前,这可能是因为UniApp的特殊处理,或者例子中的描述有误?这里可能存在矛盾,需要仔细核对。 例如,在Vue中,父组件的created钩子先于子组件的created,父组件的beforeMount先执行,然后子组件的beforeMount、mounted,最后父组件的mounted。所以如果引用中的例子显示父组件mounted在子组件之前,可能是UniApp中的不同表现,或者例子中的顺序描述有误。这候需要依据用户提供的引用内容来回答,即使可能与标准Vue不同。根据引用[2],顺序页面onLoad → 父组件created → 子组件created → 页面onShow → 父组件mounted → 子组件mounted → 页面onReady。这说明在UniApp的微信小程序中,父组件的mounted在子组件之前,这可能与平台相关,或者示例中的具体情况。 接下来,我需要将这些整理成清晰的执行顺序,分情况讨论:初次加载、页面显示/隐藏、数据更新、卸载等。同,需要引用用户提供的引用资料来支持每个步骤,比如在初次加载,按照引用[2]和[3]的描述,顺序是怎样的。 此外,需要注意UniApp中Vue2和Vue3可能有不同的生命周期,用户的问题中提到的是Vue2,因此应专注于Vue2的情况。同,引用[1]中提到了uni-app页面生命周期及组件生命周期的汇总,但用户主要引用的是[2]和[3]中的具体顺序。 最后,生成相关问题,比如生命周期顺序的影响因素、如何优化加载性能、在父子组件中的差异等。确保问题与主题相关,并帮助用户进一步理解。</think>在 UniApp(基于 Vue2)中,页面生命周期与组件生命周期的执行顺序遵循特定规则,以下是关键场景的详细分析: --- ### **一、初次进入页面执行顺序** 1. **页面生命周期**:触发 `onLoad`(页面初始化,可访问 `data` 和 `methods`)。 2. **父组件生命周期**:触发 `created`(组件实例创建)。 3. **子组件生命周期**:触发 `created`(子组件实例创建)。 4. **页面生命周期**:触发 `onShow`(页面显示)。 5. **父组件生命周期**:触发 `mounted`(父组件挂载完成)。 6. **子组件生命周期**:触发 `mounted`(子组件挂载完成)。 7. **页面生命周期**:触发 `onReady`(页面渲染完成,可操作 DOM)[^2][^3]。 > **示例流程**: > `页面onLoad` → `父组件created` → `子组件created` → `页面onShow` → `父组件mounted` → `子组件mounted` → `页面onReady` --- ### **二、页面隐藏与再次显示** - **跳转至其他页面**:触发当前页面的 `onHide`(页面隐藏)。 - **返回当前页面**:触发 `onShow`(页面重新显示)。 *注意:组件不会重新触发 `created` 或 `mounted`,除非组件被销毁*[^2][^3]。 --- ### **三、数据更新的触发顺序** 1. **页面数据变化**:触发组件内部的 `beforeUpdate` 和 `updated` 钩子。 2. **页面生命周期**:无直接对应的更新钩子,但可通过监听数据变化或使用 `onUnload`(页面卸载)清理资源。 --- ### **四、页面卸载顺序** 1. **子组件生命周期**:触发 `beforeDestroy` 和 `destroyed`(子组件销毁)。 2. **父组件生命周期**:触发 `beforeDestroy` 和 `destroyed`(父组件销毁)。 3. **页面生命周期**:触发 `onUnload`(页面卸载)。 --- ### **关键差异与注意事项** 1. **组件挂载顺序**:父组件的 `mounted` 在子组件之前触发(与标准 Vue 不同,需注意平台差异)。 2. **DOM 操作机**:页面 DOM 需在 `onReady` 后操作,组件 DOM 可在 `mounted` 中操作。 3. **数据初始化**:页面 `onLoad` 阶段即可访问组件数据,适合发起网络请求。 --- ### **示意图** ```plaintext 进入页面 → onLoad → 父组件created → 子组件created → onShow → 父组件mounted → 子组件mounted → onReady 离开页面 → onHide 返回页面 → onShow 卸载页面 → 子组件销毁 → 父组件销毁 → onUnload ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值