vue.js - vue 是先渲染 template 还是 script 呢？
<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:41Uncaught (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:1717Demo.vue:21我已经把 formState 写在 offsetPlusOne 前面了，为什么执行 offsetPlusOne 的时候，还会报错 TypeError: formState.value is undefined
共有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>
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>-
说明 调用方法： $.f2e.util.render(temp,data,fn,helper); 函数说明： 调用template渲染模板,依赖于artTemplate库 参数说明： 参数名 类型 说明 备注 temp string html字符串 无 data object 参数名 无 fn function 回调函数 无 helper function artTemplate自定义方法 无
-
路由用于将外部模板呈现到屏幕，这可以通过在路由处理程序中定义templateName来实现。 语法 (Syntax) Ember.Route.extend ({ templateName: 'path' }); 例子 (Example) 以下示例显示如何呈现用于显示数据的模板。 创建前面章节中指定的新路由。 在这里，我们创建了路径作为帖子，并使用以下代码打开router.js文件以定义UR
-
v-for 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 基本用法 <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> var ex
-
v-if 在字符串模板中，如 Handlebars ，我们得像这样写一个条件块： <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}} 在 Vue.js ，我们使用 v-if 指令实现同样的功能： <h1 v-if="ok">Yes</h1> 也可以用 v-else 添加一个 "else" 块： <h1 v-if="ok">Yes</
-
1. 简介 本小节我们将介绍 Vue 渲染函数。包括什么是渲染函数、虚拟 DOM、如何编写渲染函数。渲染函数是一个难点，通常在一些简单的项目中不会使用，在处理一些复杂的业务场景时，使用渲染函数往往可以达到事半功倍的效果。 通过本小节的学习我们可以掌握渲染函数的基本用法，如果同学们学完本小节之后对此还不是特别熟悉也没有关系，我们可以先将基础知识融会贯通，然后再对该知识点多加练习，相信同学们一定可以熟
-
bash-script-template A Bash scripting template incorporating best practices & several useful functions. Motivation Files Usage Controversies License Motivation I write Bash scripts frequently and real