uniapp的onload时函数执行有先后顺序吗

在uni-app中，onLoad是页面生命周期函数之一，在页面加载时执行。如果页面中有多个组件，它们的onLoad函数执行顺序是按照组件在页面中的位置从上到下依次执行的。也就是说，先在页面中定义的组件的onLoad函数会先执行，后定义的组件的onLoad函数会后执行。

需要注意的是，如果在组件中定义了onLoad函数，那么在页面中也定义了onLoad函数，那么只有组件中的onLoad函数会被执行，页面中的onLoad函数不会被执行。

相关问题

uniapp onLoad

在uniapp中，onLoad()是页面加载时执行的函数。根据引用\[1\]中的代码，onLoad()函数在页面加载时被调用，它首先调用getNewsDetail()方法来获取新闻详情。在这个例子中，onLoad()函数还获取了页面传递过来的id值，并将其赋给了data中的id属性。所以，onLoad()函数在页面加载时执行，并且可以用来执行一些初始化的操作，比如获取用户信息或其他必要的数据。\[1\]\[3\]

另外，根据引用\[2\]中的描述，App.vue是在第一次进入系统时执行的，如果从系统自己的页面返回到自己的页面，不会重新进入App.vue。而在进入系统时，第一次进入page.vue会触发onLoad()函数。这可能会导致一个问题，即在返回时，page.vue中的onLoad()函数被触发，但不会进入App.vue，这样await this.$onLaunched()就会一直等待。所以需要注意这个问题，确保在返回时不会出现无限等待的情况。\[2\]
#### 引用[.reference_title]
- *1* [uniapp onLoad 注意事项](https://blog.csdn.net/weixin_43457011/article/details/111152400)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [uniapp onLaunch和onLoad执行顺序，页面返回会出现问题，一直加载中](https://blog.csdn.net/qq_42440919/article/details/129793553)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

uniapp函数执行顺序

### UniApp 中函数的执行顺序

#### 应用生命周期方法调用流程

在整个应用程序层面，UniApp 提供了几种重要的生命周期回调来响应应用状态的变化。这些回调按照特定顺序被触发：

- **`onLaunch`**: 当 uni-app 初始化完成时触发，这是整个应用生命周期的第一个事件，在全局范围内仅触发一次[^2]。

export default {
  onLaunch() {
    console.log('Application has been launched');
  }
}

- **`onShow`**: 每次启动应用或是从后台切换到前台展示时都会触发此事件。这表明应用重新获得了用户的注意力。

export default {
  onShow() {
    console.log('Application is now visible to the user');
  }
}

- **`onHide`**: 此事件会在应用从前台退至后台时触发，意味着用户暂时离开了该应用。

export default {
  onHide() {
    console.log('Application moved to background');
  }
}

#### 页面生命周期方法调用流程

对于每一个单独页面而言，其拥有独立的一套生命周期管理机制，具体如下所示：

- **` onLoad`**: 页面加载过程中最先被执行的方法之一，通常用于获取数据或初始化参数[^1]。

export default {
  onLoad(option) {
    console.log('Page loading, options:', option);
  }
}

- **`onReady`**: 这是在页面初次渲染完成后才会触发的一个重要时刻点，适合用来做基于 DOM 的操作[^3]。

export default {
  onReady() {
    console.log('DOM ready for manipulation');
  }
}

- **`onShow` 和 `onHide`**: 类似于应用级别的同名钩子，分别表示当前页面变为可见以及不可见的状态变化。

export default {
  onShow() {
    console.log('This page becomes active and visible');
  },
  
  onHide() {
    console.log('This page loses focus or goes into background');
  }
}

- **`onUnload`**: 只要离开某个页面就会立即触发这个方法，可用于清理工作如取消网络请求等。

export default {
  onUnload() {
    console.log('Leaving this page');
  }
}

通过上述描述可以看出，无论是整体还是局部视角下，各个阶段都有相应的处理逻辑可供开发者利用，从而更好地控制程序的行为并提供流畅用户体验。