vue3setup 页面加载完毕函数

在Vue 3中，`setup()` 函数是一个特殊的挂载点，通常用于组织组件的业务逻辑和数据管理。它是在组件实例创建之前执行的，并且返回的对象会被自动转变为组件的 `data()`、`props` 和 `methods` 部分。当你想要在页面加载完成后执行一些初始化操作时，可以在 `setup()` 中编写这样的代码：

// 组件文件.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`：

<script setup>
const { handlePageLoad } = ref();
onMounted(handlePageLoad);
</script>

<button @click="handlePageLoad()">加载完成</button>