render 函数六个参数functionrender(_ctx,_cache,$props,$setup,$data,$options)_ctx— 组件实例代理完整的组件公开上下文是一个 Proxy。// 访问顺序setup() → data → props → computed → methods → ..._ctx.someData// 等价于 this.someDataOptions API_ctx.someMethod()模板里没有明确来源的变量都从这里取是兜底的。transformExpression给变量加的_ctx.前缀就指向它。_cache— 缓存数组组件实例上的renderCache用来存缓存的内联函数和静态节点。// 你代码里的这行就是缓存静态节点_cache[0]||(_cache[0]_createElementVNode(h1,null,1212,-1))// ↑ 第一次渲染才创建之后直接复用不重新创建 VNodeclick() {}这类内联 handler 开启cacheHandlers后也存这里避免每次渲染都生成新函数导致子组件不必要的更新。$props— 显式 props父组件传入、在defineProps/props选项里声明的属性。$props.title $props.modelValue和_ctx.title的区别$props只有声明过的 props_ctx会按优先级查找整个实例。$setup— setup() 返回值setup()返回的所有响应式变量和函数直接映射。// 你代码里$setup.count// 就是 setup() 里 return 的 countscript setup编译后所有顶层绑定都在这里。优先级高于_ctx模板编译器发现变量来自 setup 时会直接生成$setup.xxx而不是_ctx.xxx少一层 Proxy 查找。$data— data() 返回值Options API 里data()返回的响应式对象。$data.message// this.message 的直接来源script setup项目里这个永远是空对象{}。$options— 组件选项对象组件定义本身包含methods、computed、watch等选项。$options.methods.handleClick $options.computed.fullName实际模板里几乎不会直接用到是作为最后的查找后备存在的。查找优先级模板变量的解析顺序_ctx内部代理的查找链$setup $data $props $options(methods/computed...)所以同名时 setup 里的变量会覆盖 data。对应你的代码functionrender(_ctx,_cache,$props,$setup,$data,$options){return(_openBlock(),_createElementBlock(_Fragment,null,[// _cache[0]静态节点第一次创建后永远复用// -1 HOISTEDdiff 时完全跳过_cache[0]||(_cache[0]_createElementVNode(h1,null,1212,-1)),// $setup.count来自 script setup 的响应式变量// 1 TEXT flag只更新文本内容_createElementVNode(div,null,_toDisplayString($setup.count),1)],64/* STABLE_FRAGMENT */))// 64 子节点结构稳定可 Block 优化}
render 函数六个参数functionrender(_ctx,_cache,$props,$setup,$data,$options)_ctx— 组件实例代理完整的组件公开上下文是一个 Proxy。// 访问顺序setup() → data → props → computed → methods → ..._ctx.someData// 等价于 this.someDataOptions API_ctx.someMethod()模板里没有明确来源的变量都从这里取是兜底的。transformExpression给变量加的_ctx.前缀就指向它。_cache— 缓存数组组件实例上的renderCache用来存缓存的内联函数和静态节点。// 你代码里的这行就是缓存静态节点_cache[0]||(_cache[0]_createElementVNode(h1,null,1212,-1))// ↑ 第一次渲染才创建之后直接复用不重新创建 VNodeclick() {}这类内联 handler 开启cacheHandlers后也存这里避免每次渲染都生成新函数导致子组件不必要的更新。$props— 显式 props父组件传入、在defineProps/props选项里声明的属性。$props.title $props.modelValue和_ctx.title的区别$props只有声明过的 props_ctx会按优先级查找整个实例。$setup— setup() 返回值setup()返回的所有响应式变量和函数直接映射。// 你代码里$setup.count// 就是 setup() 里 return 的 countscript setup编译后所有顶层绑定都在这里。优先级高于_ctx模板编译器发现变量来自 setup 时会直接生成$setup.xxx而不是_ctx.xxx少一层 Proxy 查找。$data— data() 返回值Options API 里data()返回的响应式对象。$data.message// this.message 的直接来源script setup项目里这个永远是空对象{}。$options— 组件选项对象组件定义本身包含methods、computed、watch等选项。$options.methods.handleClick $options.computed.fullName实际模板里几乎不会直接用到是作为最后的查找后备存在的。查找优先级模板变量的解析顺序_ctx内部代理的查找链$setup $data $props $options(methods/computed...)所以同名时 setup 里的变量会覆盖 data。对应你的代码functionrender(_ctx,_cache,$props,$setup,$data,$options){return(_openBlock(),_createElementBlock(_Fragment,null,[// _cache[0]静态节点第一次创建后永远复用// -1 HOISTEDdiff 时完全跳过_cache[0]||(_cache[0]_createElementVNode(h1,null,1212,-1)),// $setup.count来自 script setup 的响应式变量// 1 TEXT flag只更新文本内容_createElementVNode(div,null,_toDisplayString($setup.count),1)],64/* STABLE_FRAGMENT */))// 64 子节点结构稳定可 Block 优化}
