vue mount 琐谈

November 26, 2024

vue

本文讨论仅 vue 3.5 使用 setup 时，mount 之前的生命周期。
注意 beforeCreate 和 create 不属于组合式 API 的生命周期钩子，因此下文不会探讨。

官方图例如下：

Lifecycle Hooks

本文仅考虑 mount。从 mountComponent 函数开始（源码：packages/runtime-core/src/renderer.ts）

我们知道，组件实际 DOM 节点在 renderComponentRoot 中创建。
因此 setup 和 onBeforeMount 时，DOM 节点并未创建。
而当 onMounted 时，DOM 节点已经添加到文档。

简单验证：

Comp.vue

<script setup>
import { getCurrentInstance, onBeforeMount, onMounted } from "vue";
const inDocument = document.contains.bind(document);
const instance = getCurrentInstance();
const log = (x) =>
    console.log(performance.now(), x, instance.isMounted, instance.vnode.el, inDocument(instance.vnode.el));

log("setup"); // false null false
onBeforeMount(() => log("onBeforeMount")); // false null false
onMounted(() => log("onMounted")); // true <h1>Hi</h1> true
</script>

<template>
    <h1 ref="h1">Hi</h1>
</template>

vue

<script setup>
import Comp from "./Comp.vue";
const log = (x) => console.log(performance.now(), x);
</script>

<template>
    <Comp
        @vue:before-mount="log('vnode-before-mount')"
        @vue:before-unmount="log('vnode-before-unmount')"
        @vue:before-update="log('vnode-before-update')"
        @vue:mounted="log('vnode-mounted')"
        @vue:unmounted="log('vnode-unmounted')"
        @vue:updated="log('vnode-updated')"
    />
</template>

可以发现，setup 完成（组件已经完成了其响应式状态的设置）后几乎立即同步调用 onBeforeMount。
setup/onBeforeMount 与 onMount 的区别显而易见：只有 onMount 后，DOM 才被创建并挂载。

那么使用 setup 和 onBeforeMount 有什么区别？
个人认为主要的区别是 SSR 期间，onBeforeMount 不会被调用。那么区分 setup 和 onBeforeMount 则可以区分 SSR 和 CSR。

setup 执行时间一般很短。那么这里除了可以忽略不计的先后顺序问题，其它问题暂未想到，待补充。。。

setup 和 onBeforeMount 差异很小，考虑 CSR 数据获取的场景，如何选择在 setup 还是 onMounted 中发起请求？
需要获取 DOM 时，答案不言而喻。但绝大部分发起网络请求的场景不涉及 DOM，或者说与 DOM 无关。
当然，onMounted 不会在 SSR 期间调用，SSR 数据获取可参考 Nuxt.js 方案。下面只讨论 CSR。

vue

<script setup>
import { onMounted } from "vue";
import { ref } from "vue";
const data = ref(null);
const callApi = () =>
    fetch("https://dummyjson.com/test")
        .then((res) => res.json())
        .then((d) => (data.value = d));

callApi();
// OR
onMounted(callApi);
</script>

<template>
    <h1>{{ data ? data.status : "loading..." }}</h1>
</template>

https://router.vuejs.org/zh/guide/advanced/data-fetching.html

不妨观察某些第三方库实现：
vue-use 的 useFetch 实现。

@tanstack/vue-query 实现在这方面也是一样的。

响应式数据需在 setup 中创建，因此它们实际发起异步请求都是在 setup 中，而不是 onMounted。

比较疑惑的点在于，一些博客教程坚持将请求放在 onMounted 发起，给出的说法是在生命周期中更直观/错误处理更好。
当然，使用回调函数确实有优点，如可以在函数作用域中创建临时变量。
总的来说，在无需 DOM 的场景下，坚持使用 onMounted 除了考虑代码风格外，很难有说服力。

由于 setup 发生在 onMounted 之前，且在这之间 vue 是同步创建 DOM 的，这要花一点时间。
因此使用 setup 能够更快的入队请求。虽然收益不会很高，但确实要快一些。

以下例为证：

Comp.vue

<script setup lang="ts">
import { onMounted } from "vue";
import { ref } from "vue";
const data = ref(null);
const callApi = () =>
    fetch("https://worldtimeapi.org/api/timezone/Asia/Hong_Kong")
        .then((res) => res.json())
        .then(({ datetime }) => (data.value = datetime));

const props = defineProps<{
    on: "setup" | "mounted";
}>();

switch (props.on) {
    case "setup":
        callApi();
        break;
    case "mounted":
        onMounted(callApi);
        break;
}
</script>

<template>
    <h1>{{ data ?? "loading..." }}</h1>
</template>

vue

<script setup>
import Comp from "./Comp.vue";
</script>

<template>
    <Comp on="setup" />
    <Comp on="mounted" />
    <Comp on="mounted" />
    <Comp on="setup" />
</template>

←Back to home

This work is licensed under CC BY-NC-SA 4.0