uniapp中的页面生命周期函数

uniapp页面生命周期函数与 Vue.js 的生命周期函数有所不同，因为 uni-app 是基于 Vue.js 的跨平台应用框架，因此它具有自己特定的生命周期函数。
可以在这些生命周期函数中编写相应的逻辑代码，以便在不同阶段对页面进行初始化、展示、隐藏和卸载时执行特定的操作。

在开发uniapp Vue3版本的时候，不能像vue2的选项式API一样，可以直接使用onLoad、onShow等，在组合式API中需要先从“@dcloudio/uni-app”模块中导入才可以。

<script setup>
import {onLoad,onReady} from "@dcloudio/uni-app"
</script>

• onLoad：页面加载时触发，可以在此生命周期函数中进行页面初始化操作。
• onShow：页面显示时触发，可以在此生命周期函数中进行页面展示相关的操作。
• onReady：页面初次渲染完成时触发，可以在此生命周期函数中进行页面渲染完成后的操作。
• onHide：页面隐藏时触发，可以在此生命周期函数中进行页面隐藏相关的操作。
• onUnload：页面卸载时触发，可以在此生命周期函数中进行页面卸载相关的操作。
• 其他常用的生命周期，可以看官方发文档，页面生命周期

uniapp中组件生命周期函数和页面生命周期函数的执行顺序

不包含组件的页面

onLoad > onShow > onReady

包含组件的页面

onLoad > onShow > onBeforeMount > onReady > onMounted

开发uniapp使用Vue3组合式API版本，如何实现从vue模块中自动导入

为什么要配置自动导入？

在常规开发uniappVue3的项目时，需要用到ref、computed等需要每次都手动import导入，使用unplugin-auto-import插件就可以免去每次导入的步骤了，在使用插件前的示例代码如下：

<script setup>
import {onMounted, onUpdated, ref,computed} from "vue";
import {onLoad,onReady} from "@dcloudio/uni-app"
const count = ref(0);
const state = ref(true)
onLoad(()=>{
	console.log("onLoad,页面生命周期钩子");
})
onMounted(()=>{
	console.log("onMounted,组件生命周期函数");
})
</script>

通过上面示例代码可以看到，每次使用生命周期函数时候，必须从vue模块导入之后才能使用，不然就会报错。

使用自动导入插件unplugin-auto-import

1.在项目命令行终端中执行如下代码】

npm install unplugin-auto-import

2.根目录下创建vite.config.js，并拷贝下面的代码

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
 
export default defineConfig({
    plugins: [
        uni(),        
        // 自动导入配置
        AutoImport({
            imports:[
                // 预设
                'vue',
                'uni-app'                
            ]
        })
    ]    
})

3.去除vue和uniapp模块导入，项目可以正常运行

<script setup>
const count = ref(0);
const state = ref(true)
onLoad(()=>{
	console.log("onLoad,页面生命周期钩子");
})
onMounted(()=>{
	console.log("onMounted,组件生命周期函数");
})
</script>