vue3setup 页面加载完毕函数
时间: 2024-09-24 18:22:57 浏览: 50
何时/使用 Vue3 render 函数的教程详解
在Vue 3中,`setup()` 函数是一个特殊的挂载点,通常用于组织组件的业务逻辑和数据管理。它是在组件实例创建之前执行的,并且返回的对象会被自动转变为组件的 `data()`、`props` 和 `methods` 部分。当你想要在页面加载完成后执行一些初始化操作时,可以在 `setup()` 中编写这样的代码:
```javascript
// 组件文件.vue
import { onMounted } from 'vue';
export default {
setup() {
// 使用 onMounted 注册一个钩子,在组件挂载到DOM后执行
const handlePageLoad = async () => {
// 这里可以写你的异步操作,如从API获取数据或者执行初次渲染前的准备工作
await someAsyncFunction();
// 或者简单的DOM元素检查
document.addEventListener('DOMContentLoaded', function() {
console.log('页面已加载完成');
});
// 当页面加载完成时,你可以在这里设置初始状态、调用其他生命周期钩子等
};
// 返回一个对象供setup函数外部使用
return { handlePageLoad };
}
};
```
然后在模板中通过 `ref`、`async` 或者直接调用 `handlePageLoad`:
```html
<script setup>
const { handlePageLoad } = ref();
onMounted(handlePageLoad);
</script>
<button @click="handlePageLoad()">加载完成</button>
```
阅读全文