uni中组件的生命周期
时间: 2023-10-21 11:54:05 浏览: 39
在uni-app中,组件的生命周期分为以下几个阶段:
1. beforeCreate:在实例初始化之后,数据观测(data observer)和事件配置(event/event bus)之前调用,此时组件的属性和方法还未初始化。
2. created:实例已经创建完成,属性和方法已经准备就绪,但还未挂载到页面上。
3. beforeMount:在组件挂载到页面之前调用,此时组件已经编译完成,但还未渲染到页面上。
4. mounted:组件已经挂载到页面上并且渲染完成,可以进行DOM操作和数据请求。
5. beforeUpdate:在组件更新之前调用,此时数据已经更新,但尚未重新渲染到页面上。
6. updated:组件已经更新完成,数据已经重新渲染到页面上。
7. beforeDestroy:在组件销毁之前调用,此时组件仍然可用。
8. destroyed:组件已经销毁,所有的事件监听器和观察者都已被移除,不再可用。
除了以上生命周期钩子函数外,uni-app还提供了一些特殊的生命周期函数:
- onReady:在页面初次渲染完成时调用,只会触发一次。
- onShow:当页面可见时触发,可以多次被调用。
- onHide:当页面不可见时触发。
这些生命周期函数可以在组件实例中通过方法的方式进行定义,比如在组件的 script 部分使用 methods 属性定义。
相关问题
uni-app组件生命周期
uni-app组件的生命周期包括以下几个阶段:created、attached、ready、moved和detached。当组件实例被创建时,created函数会被调用;当组件被添加到页面节点树中时,attached函数会被调用;当组件渲染完毕并且可以和页面交互时,ready函数会被调用;当组件被移动到新的位置时,moved函数会被调用;当组件被从页面节点树中移除时,detached函数会被调用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [uniapp中的生命周期](https://blog.csdn.net/jieyucx/article/details/130082445)[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* [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 ]
uni-app组件生命周期及示例代码
uni-app的组件生命周期与Vue的生命周期相同,包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。下面是一个简单的uni-app组件生命周期的示例代码:
```
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
},
beforeCreate() {
console.log('组件实例刚被创建,属性和方法还未初始化')
},
created() {
console.log('组件实例已经创建完成,属性和方法已经初始化')
},
beforeMount() {
console.log('组件挂载前执行')
},
mounted() {
console.log('组件挂载后执行')
},
beforeUpdate() {
console.log('组件更新前执行')
},
updated() {
console.log('组件更新后执行')
},
beforeDestroy() {
console.log('组件销毁前执行')
},
destroyed() {
console.log('组件销毁后执行')
}
}
</script>
```
在这个示例代码中,我们定义了一个简单的组件,它包含一个数据属性message和一个模板。在组件的生命周期函数中,我们使用console.log()输出了不同阶段的信息。当组件被创建时,beforeCreate()和created()函数会被依次执行;当组件被挂载到DOM上时,beforeMount()和mounted()函数会被依次执行;当组件的数据发生变化时,beforeUpdate()和updated()函数会被依次执行;当组件被销毁时,beforeDestroy()和destroyed()函数会被依次执行。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.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)
![](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)