vue 是先渲染 template 还是 script 呢？

Question

<template>
    <div>
        <a-pagination v-model:current="offsetPlusOne" show-quick-jumper :total="500" @change="onChange" />
        <br />
        <!-- <a-pagination v-model:current="current2" show-quick-jumper :total="500" disabled show-less-items
            @change="onChange" /> -->
    </div>
</template>
<script setup>
import { ref, reactive, computed } from "vue";



const formState = reactive({
    limit: 20,
    offset: 0,
});

const offsetPlusOne = computed(() => {
    //   return formState.value ? formState.value.offset + 1 : 0;
    return formState.value.offset + 1
});

</script>

代码如上，首次加载界面会有报错 TypeError: formState.value is undefined

[Vue warn]: Unhandled error during execution of render function 
  at <Demo onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> runtime-core.esm-bundler.js:41
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <Demo onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App> runtime-core.esm-bundler.js:41
Uncaught (in promise) TypeError: formState.value is undefined
    offsetPlusOne Demo.vue:21
    run reactivity.esm-bundler.js:178
    get value reactivity.esm-bundler.js:1147
    unref reactivity.esm-bundler.js:1026
    get reactivity.esm-bundler.js:1032
    render Demo.vue:3
    renderComponentRoot runtime-core.esm-bundler.js:815
    componentUpdateFn runtime-core.esm-bundler.js:5701
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5814
    setupRenderEffect runtime-core.esm-bundler.js:5822
    mountComponent runtime-core.esm-bundler.js:5612
    processComponent runtime-core.esm-bundler.js:5565
    patch runtime-core.esm-bundler.js:5040
    componentUpdateFn runtime-core.esm-bundler.js:5773
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5814
    callWithErrorHandling runtime-core.esm-bundler.js:158
    flushJobs runtime-core.esm-bundler.js:357
    promise callback*queueFlush runtime-core.esm-bundler.js:270
    queuePostFlushCb runtime-core.esm-bundler.js:290
    queueEffectWithSuspense runtime-core.esm-bundler.js:1603
    scheduler runtime-core.esm-bundler.js:1773
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:363
    triggerRefValue reactivity.esm-bundler.js:974
    effect reactivity.esm-bundler.js:1135
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:358
    triggerRefValue reactivity.esm-bundler.js:974
    effect reactivity.esm-bundler.js:1135
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:358
    triggerRefValue reactivity.esm-bundler.js:974
    set value reactivity.esm-bundler.js:1018
    finalizeNavigation vue-router.mjs:3355
    pushWithRedirect vue-router.mjs:3220
    promise callback*pushWithRedirect vue-router.mjs:3186
    push vue-router.mjs:3112
    install vue-router.mjs:3551
    use runtime-core.esm-bundler.js:3752
    <anonymous> main.js:13
    js app.js:151
    __webpack_require__ app.js:593
    __webpack_exports__ app.js:1714
    O app.js:639
    <anonymous> app.js:1715
    <anonymous> app.js:1717
Demo.vue:21

​

我已经把 formState 写在 offsetPlusOne 前面了，为什么执行 offsetPlusOne 的时候，还会报错 TypeError: formState.value is undefined

Answer 1

reactive不用，formState.value，可以直接访问

<script setup>
import { ref, reactive, computed } from "vue";

const formState = reactive({
    limit: 20,
    offset: 0,
});

const offsetPlusOne = computed(() => {
    return formState.offset + 1;
});
</script>

Answer 2

reactive 获取属性时不需用.value， ref才需要

<template>
    <div>
        <a-pagination v-model:current="offsetPlusOne" show-quick-jumper :total="500" @change="onChange" />
        <br />
        <!-- <a-pagination v-model:current="current2" show-quick-jumper :total="500" disabled show-less-items
            @change="onChange" /> -->
    </div>
</template>
<script setup>
import { ref, reactive, computed } from "vue";



const formState = ref({
    limit: 20,
    offset: 0,
});

const offsetPlusOne = computed(() => {
    //   return formState.value ? formState.value.offset + 1 : 0;
    return formState.value.offset + 1
});

</script>