首页uniapp vue3 onReady

uniapp vue3 onReady

时间: 2025-04-29 22:52:51 浏览: 27

### uni-app Vue 3 `onReady` 生命周期钩子详解在uni-app框架下，Vue组件的生命周期对于开发人员来说至关重要。当涉及到页面初始化完成后的操作时，`onReady` 钩子显得尤为重要[^2]。 #### 定义与作用 `onReady` 是一个生命周期函数，在页面初次渲染完成后调用，此时页面已经加载完毕并且DOM元素已准备好可以被访问。这使得开发者可以在该时刻执行一些依赖于真实 DOM 结构的操作，比如获取节点尺寸或者绑定事件监听器等[^1]。 #### 使用方法为了利用好这个特性，可以通过如下方式定义： ```javascript export default { setup() { onReady(() => { console.log('Page has been fully loaded and ready'); // 这里放置需要在页面完全加载后运行的代码 }); } } ``` 这段代码展示了如何在一个基于组合API风格编写的应用程序中注册并实现`onReady`回调。一旦页面准备就绪，就会触发此回调中的逻辑处理。 #### 实际应用场景举例假设有一个需求是在页面显示之后立即调整某个容器的高度来适应其内容，则可以在`onReady`内部进行相应的计算和设置: ```html <template> <view id="contentContainer"></view> </template> <script lang="ts"> import { ref, onReady } from 'vue'; export default { setup() { const contentHeight = ref(0); onReady(() => { const containerElement = document.getElementById('contentContainer'); if (containerElement) { contentHeight.value = containerElement.scrollHeight; // 更新样式或其他业务逻辑... } }); return { contentHeight, }; }, }; </script> ``` 上述例子说明了怎样通过`onReady`去响应页面状态变化，并据此做出动态调整。

阅读全文