vue中页面初次加载触发的生命周期函数
时间: 2024-04-24 22:25:52 浏览: 29
在Vue中,页面初次加载会触发以下生命周期函数:
1. beforeCreate:在实例初始化之,数据观测和事件配置之前被调用。此时,实例还没有被创建完成,因此无法访问到数据和方法。
2. created:在实例创建完成后被立即调用。此时,实例已经完成了数据观测和事件配置,但还没有挂载到DOM上。
3. beforeMount:在挂载开始之前被调用。在此生命周期函数中,模板编译完成,但尚未将模板渲染到真实的DOM中。
4. mounted:在挂载完成后被调用。此时,实例已经被挂载到DOM上,并且可以访问到DOM元素。
这些生命周期函数可以通过在Vue组件中定义对应的方法来使用。例如,在组件的选项中定义一个名为"mounted"的方法,即可在页面初次加载时触发该方法。
```javascript
export default {
mounted() {
// 在页面初次加载时触发
// 可以在这里进行一些初始化操作或发送网络请求等等
}
}
```
需要注意的是,Vue3中的生命周期函数发生了一些改变,具体的变化可以参考Vue官方文档。
相关问题
vue2生命周期和uniapp生命周期对比
Vue2的生命周期和Uniapp的生命周期有一些相似之处,但也存在一些差异。下面是它们的对比:
Vue2的生命周期包括以下阶段:
1. beforeCreate:实例刚在内存中创建,数据观测和事件配置之前。
2. created:实例已经创建完成,数据观测和事件配置完成。
3. beforeMount:模板编译/挂载之前。
4. mounted:模板编译/挂载完成,实例已经挂载到DOM上。
5. beforeUpdate:数据更新之前,虚拟DOM重新渲染之前。
6. updated:数据更新完成,虚拟DOM重新渲染完成。
7. beforeDestroy:实例销毁之前,清除定时器、解绑事件等操作。
8. destroyed:实例销毁完成。
Uniapp的生命周期与Vue2的生命周期类似,但有一些额外的生命周期钩子函数:
1. onLaunch:小程序初始化时触发,全局只触发一次。
2. onShow:小程序启动或从后台进入前台显示时触发。
3. onHide:小程序从前台进入后台时触发。
4. onError:小程序发生脚本错误或API调用失败时触发。
5. onPageNotFound:小程序找不到页面时触发。
Uniapp还支持页面级别的生命周期钩子函数,包括:
1. onLoad:页面加载时触发。
2. onReady:页面初次渲染完成时触发。
3. onUnload:页面卸载时触发。
4. onPullDownRefresh:用户下拉刷新时触发。
5. onReachBottom:页面上拉触底时触发。
6. onShareAppMessage:用户点击右上角分享时触发。
uniapp小程序生命周期函数
在uni-app中,小程序的生命周期函数可以分为应用生命周期函数和页面生命周期函数。
应用生命周期函数包括:
- onLaunch: 当uni-app初始化完成时触发,全局只触发一次。
- onShow: 当uni-app启动,或从后台进入前台显示时触发。
- onHide: 当uni-app从前台进入后台时触发。
- onError: 当uni-app报错时触发。
页面生命周期函数包括:
- onLoad: 当页面加载时触发。
- onShow: 当页面显示时触发。
- onHide: 当页面隐藏时触发。
- onUnload: 当页面卸载时触发。
- onReady: 当页面初次渲染完成时触发。
需要注意的是,uni-app还支持nvue页面和支付宝小程序真机的特殊生命周期。nvue页面的生命周期与weex相同,可以参考weex的生命周期介绍。而支付宝小程序真机可以监听到非navigateBack引发的返回事件,并且不可以阻止默认的返回行为。
如果你想在App.vue文件中监听应用的生命周期,可以在<script>标签中编写相应的函数,如下所示:
```
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
```
这样,当应用的对应生命周期触发时,相应的函数就会执行,并输出相应的信息。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [uni-app的生命周期](https://blog.csdn.net/ZgaoYi/article/details/121685446)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [uniapp 生命周期简介](https://blog.csdn.net/BlizzardWu/article/details/112862047)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![dll](https://img-home.csdnimg.cn/images/20210720083646.png)