setup 在组件实例创建后、模板编译前执行，为渲染提供响应式基础；vnode 在 render 函数执行时生成，基于 setup 返回的状态构建虚拟节点树，随后进入 patch 流程更新 dom。
在 Vue 3 的 Composition API 中，setup 函数的执行发生在组件实例初始化阶段，早于模板编译与 VNode 生成；它不直接参与 VNode 构建，但为后续渲染提供了响应式状态和逻辑基础。
setup 执行时机：组件实例创建后、模板编译前
setup 是组件选项中最早运行的逻辑入口（在 beforeCreate 和 created 钩子之前）。此时：
- 组件实例（
instance）已创建，但尚未进行 props 解析、插槽处理或模板编译； - 响应式系统（
ref、reactive）已就绪，可安全调用； - 不能访问
this，也没有slots、attrs等运行时上下文（它们在 setup 返回后才被注入）； - 返回的对象/函数会被合并进渲染上下文，供模板编译器读取（如
{{ count }}对应 setup 中返回的count）。
VNode 生成时机：模板编译后、patch 前
VNode（虚拟节点）是在组件首次渲染或响应式更新触发 render 函数执行时生成的。具体流程如下：
- 若使用单文件组件（SFC），
<template></template>在构建时被@vue/compiler-dom编译为render函数（含createElement/h调用）； - 若使用纯 JS，需手写
render()函数，内部显式调用h()创建 VNode； -
render函数执行时，读取 setup 返回的响应式变量（如count.value），并基于当前状态生成新的 VNode 树； - 该 VNode 树随后传入
patch流程，与旧 VNode 比对并更新真实 DOM。
关键时间线关系：setup → render → VNode → patch
一次典型同步渲染的顺序是：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章