[{"data":1,"prerenderedAt":1794},["ShallowReactive",2],{"post:\u002Fblog\u002Fvue-3-6-rc-upgrade-guide":3,"surroundings:\u002Fblog\u002Fvue-3-6-rc-upgrade-guide":1788},{"id":4,"title":5,"accent":6,"body":7,"description":1767,"draft":1768,"experience":1769,"extension":1770,"featured":307,"image":1771,"meta":1777,"navigation":307,"path":1778,"publishedAt":1779,"readingTime":1780,"seo":1781,"stem":1782,"tags":1783,"updatedAt":1769,"__hash__":1787},"posts\u002Fblog\u002Fvue-3-6-rc-upgrade-guide.md","Vue 3.6 RC 升级全景：从 3.5 到 Vapor Mode 与 alien-signals","mint",{"type":8,"value":9,"toc":1728},"minimark",[10,19,34,37,47,52,198,201,206,210,213,250,253,259,263,270,273,418,421,428,434,438,441,454,460,463,466,483,486,489,506,523,526,530,533,536,545,548,552,555,685,688,717,745,748,752,755,805,808,812,819,880,883,886,892,898,901,905,908,922,931,979,986,989,1002,1005,1009,1012,1150,1157,1163,1166,1254,1257,1291,1294,1307,1310,1314,1317,1320,1323,1327,1330,1334,1337,1340,1343,1347,1350,1368,1375,1392,1395,1421,1424,1428,1431,1451,1454,1458,1461,1484,1487,1491,1494,1497,1517,1520,1524,1527,1531,1534,1538,1541,1545,1548,1551,1634,1637,1640,1648,1651,1658,1661,1664,1667,1719,1724],[11,12,13,14,18],"p",{},"如果只看版本号，Vue 3.6 像是一次普通的次版本升级。但真正读完发布说明后，我的感受是：",[15,16,17],"strong",{},"它更像 Vue 为下一阶段准备的一次“换发动机”","。",[11,20,21,22,26,27,26,30,33],{},"一边是基于 alien-signals 重构的响应式内核，公开的 ",[23,24,25],"code",{},"ref","、",[23,28,29],{},"computed",[23,31,32],{},"watch"," 用法基本不变；另一边是正式进入 RC 阶段的 Vapor Mode，它让 Vue 单文件组件可以绕过虚拟 DOM，编译为更直接的 DOM 更新逻辑。",[11,35,36],{},"不过，先把最重要的版本信息放在前面：",[38,39,40],"blockquote",{},[11,41,42,43,46],{},"截至 2026 年 7 月 26 日，Vue 3.6 的最新版本是 ",[15,44,45],{},"3.6.0-rc.2","。RC 是候选发布版，不是稳定版。本文适合用来评估、试验和准备迁移，不代表所有生产项目都应该立即升级。",[48,49,51],"h2",{"id":50},"先看结论36-改变了什么","先看结论：3.6 改变了什么",[53,54,55,74],"table",{},[56,57,58],"thead",{},[59,60,61,65,68,71],"tr",{},[62,63,64],"th",{},"对比维度",[62,66,67],{},"Vue 3.5",[62,69,70],{},"Vue 3.6 RC",[62,72,73],{},"对现有项目的实际影响",[75,76,77,92,106,120,134,148,166,184],"tbody",{},[59,78,79,83,86,89],{},[80,81,82],"td",{},"响应式系统",[80,84,85],{},"3.5 已做过内部优化",[80,87,88],{},"基于 alien-signals 大幅重构",[80,90,91],{},"常规 Composition API 写法通常不需要重写，但应回归复杂副作用与调度逻辑",[59,93,94,97,100,103],{},[80,95,96],{},"默认渲染模式",[80,98,99],{},"Virtual DOM",[80,101,102],{},"仍然是 Virtual DOM",[80,104,105],{},"单纯升级依赖不会让应用自动进入 Vapor",[59,107,108,111,114,117],{},[80,109,110],{},"Vapor Mode",[80,112,113],{},"尚未作为 3.5 的正式能力交付",[80,115,116],{},"功能集进入 RC，100% 显式启用",[80,118,119],{},"可以从单个性能敏感区域开始试验",[59,121,122,125,128,131],{},[80,123,124],{},"应用体积",[80,126,127],{},"默认包含 VDOM runtime",[80,129,130],{},"纯 Vapor 应用可不引入 VDOM runtime",[80,132,133],{},"只有纯 Vapor 或边界清晰的场景，体积收益才容易兑现",[59,135,136,139,142,145],{},[80,137,138],{},"API 覆盖",[80,140,141],{},"完整 Vue 3 API 生态",[80,143,144],{},"Vapor 支持 Vue API 的一个子集",[80,146,147],{},"Options API、实例代理相关能力不能直接迁移",[59,149,150,153,156,163],{},[80,151,152],{},"VDOM \u002F Vapor 混用",[80,154,155],{},"不适用",[80,157,158,159,162],{},"通过 ",[23,160,161],{},"vaporInteropPlugin"," 互操作",[80,164,165],{},"标准 props、事件、slots 已覆盖，但复杂嵌套仍需测试",[59,167,168,171,174,181],{},[80,169,170],{},"事件委托",[80,172,173],{},"原生监听语义",[80,175,176,177,180],{},"rc.2 起默认直接绑定；",[23,178,179],{},".delegate"," 才显式委托",[80,182,183],{},"不要沿用 rc.1 的默认委托认知",[59,185,186,189,192,195],{},[80,187,188],{},"适合生产吗",[80,190,191],{},"稳定版",[80,193,194],{},"当前仍是预发布版",[80,196,197],{},"生产项目应等待稳定版和上层生态明确支持",[11,199,200],{},"一句话概括：",[11,202,203],{},[15,204,205],{},"Vue 3.5 的亮点更接近“开发体验和 SSR 能力升级”，Vue 3.6 的核心则是“响应式内核与渲染架构升级”。",[48,207,209],{"id":208},"从-35-到-36变化重心已经不同","从 3.5 到 3.6：变化重心已经不同",[11,211,212],{},"Vue 3.5 没有破坏性变化，它带来的能力大多能直接被业务开发感知：",[214,215,216,220,226,232,238,241,247],"ul",{},[217,218,219],"li",{},"响应式 Props 解构正式稳定；",[217,221,222,225],{},[23,223,224],{},"useTemplateRef()"," 改善模板引用的组织方式；",[217,227,228,231],{},[23,229,230],{},"onWatcherCleanup()"," 让 watcher 清理逻辑更自然；",[217,233,234,237],{},[23,235,236],{},"useId()"," 提供 SSR 友好的稳定 ID；",[217,239,240],{},"异步组件支持懒激活（Lazy Hydration）；",[217,242,243,246],{},[23,244,245],{},"data-allow-mismatch"," 可以声明允许的 hydration 差异；",[217,248,249],{},"Deferred Teleport 与自定义元素能力得到增强。",[11,251,252],{},"3.6 当然也包含大量修复，但它最值得关注的两件事——alien-signals 与 Vapor——都位于框架的底层。你可能不会在业务代码里多写一个新 API，却会面对新的性能特征、编译产物和运行时边界。",[11,254,255,256],{},"这也决定了升级思路：",[15,257,258],{},"不要只检查“代码能不能编译”，还要检查响应式行为、SSR hydration、组件互操作和真实性能。",[48,260,262],{"id":261},"变化一响应式内核切换到-alien-signals","变化一：响应式内核切换到 alien-signals",[11,264,265,266,269],{},"Vue 3.6 对 ",[23,267,268],{},"@vue\u002Freactivity"," 做了大规模重构，其基础来自 StackBlitz 开源的 alien-signals。",[11,271,272],{},"对于绝大多数业务开发者，下面这些代码仍然是熟悉的 Vue：",[274,275,280],"pre",{"className":276,"code":277,"language":278,"meta":279,"style":279},"language-ts shiki shiki-themes github-dark github-dark","import { computed, ref, watchEffect } from 'vue'\n\nconst price = ref(99)\nconst count = ref(2)\nconst total = computed(() => price.value * count.value)\n\nwatchEffect(() => {\n  console.log(total.value)\n})\n","ts","",[23,281,282,302,309,335,354,382,387,400,412],{"__ignoreMap":279},[283,284,287,291,295,298],"span",{"class":285,"line":286},"line",1,[283,288,290],{"class":289},"sOPea","import",[283,292,294],{"class":293},"suv1-"," { computed, ref, watchEffect } ",[283,296,297],{"class":289},"from",[283,299,301],{"class":300},"s4wv1"," 'vue'\n",[283,303,305],{"class":285,"line":304},2,[283,306,308],{"emptyLinePlaceholder":307},true,"\n",[283,310,312,315,319,322,326,329,332],{"class":285,"line":311},3,[283,313,314],{"class":289},"const",[283,316,318],{"class":317},"s8ozJ"," price",[283,320,321],{"class":289}," =",[283,323,325],{"class":324},"sFR8T"," ref",[283,327,328],{"class":293},"(",[283,330,331],{"class":317},"99",[283,333,334],{"class":293},")\n",[283,336,338,340,343,345,347,349,352],{"class":285,"line":337},4,[283,339,314],{"class":289},[283,341,342],{"class":317}," count",[283,344,321],{"class":289},[283,346,325],{"class":324},[283,348,328],{"class":293},[283,350,351],{"class":317},"2",[283,353,334],{"class":293},[283,355,357,359,362,364,367,370,373,376,379],{"class":285,"line":356},5,[283,358,314],{"class":289},[283,360,361],{"class":317}," total",[283,363,321],{"class":289},[283,365,366],{"class":324}," computed",[283,368,369],{"class":293},"(() ",[283,371,372],{"class":289},"=>",[283,374,375],{"class":293}," price.value ",[283,377,378],{"class":289},"*",[283,380,381],{"class":293}," count.value)\n",[283,383,385],{"class":285,"line":384},6,[283,386,308],{"emptyLinePlaceholder":307},[283,388,390,393,395,397],{"class":285,"line":389},7,[283,391,392],{"class":324},"watchEffect",[283,394,369],{"class":293},[283,396,372],{"class":289},[283,398,399],{"class":293}," {\n",[283,401,403,406,409],{"class":285,"line":402},8,[283,404,405],{"class":293},"  console.",[283,407,408],{"class":324},"log",[283,410,411],{"class":293},"(total.value)\n",[283,413,415],{"class":285,"line":414},9,[283,416,417],{"class":293},"})\n",[11,419,420],{},"变化主要发生在内部：依赖如何建立、状态如何标记、计算属性何时失效、effect 如何沿依赖图传播，以及这些关系如何被清理和复用。",[11,422,423],{},[424,425],"img",{"alt":426,"src":427},"由活跃与休眠路径组成的细粒度响应式依赖网络","\u002Fmedia\u002Fposts\u002Fvue-3-6-rc-upgrade-guide\u002Freactivity-core-v1.webp",[11,429,430],{},[431,432,433],"em",{},"这张图表达的是依赖传播的概念，不是 Vue 内部数据结构的逐字段示意。",[435,436,437],"h3",{"id":437},"性能数字应该怎样理解",[11,439,440],{},"Vue 核心仓库的 alien-signals 合并 PR 给出过两类微基准结果：",[214,442,443,451],{},[217,444,445,446,26,448,450],{},"在大量 ",[23,447,25],{},[23,449,29],{}," 和 effect 实例的构造场景中，示例内存从约 2.3 MB 降至约 2.0 MB，约减少 13%；",[217,452,453],{},"在“一个源变化后，大量 computed 被读取”的特定压力场景中，性能提升可以超过 30 倍。",[11,455,456,457],{},"第二个数字很亮眼，但不能直接翻译成“Vue 3.6 应用快 30 倍”。它证明的是：",[15,458,459],{},"新的依赖传播算法在某些过去成本会随规模显著上升的图结构中，复杂度表现更好。",[11,461,462],{},"真实页面还包含 DOM、布局、网络、组件库、序列化和业务计算。升级前后的判断应基于自己项目的 flame chart、交互延迟、内存曲线和打包结果，而不是套用框架微基准。",[435,464,465],{"id":465},"哪些项目最可能感受到收益",[214,467,468,471,474,477,480],{},[217,469,470],{},"大量 computed 相互依赖的数据看板；",[217,472,473],{},"高频修改、筛选和派生状态很多的编辑器；",[217,475,476],{},"长时间运行、创建和销毁大量 effect 的工作台；",[217,478,479],{},"表单字段多、验证规则和联动关系复杂的应用；",[217,481,482],{},"基于 Vue 响应式原语构建的状态管理或工具库。",[11,484,485],{},"普通内容页也能得到内部改进，但用户未必会感知到明显差异。",[435,487,488],{"id":488},"谁需要格外谨慎",[11,490,491,492,26,494,26,497,26,499,501,502,505],{},"如果代码只使用公开的 ",[23,493,25],{},[23,495,496],{},"reactive",[23,498,29],{},[23,500,32],{}," 与 ",[23,503,504],{},"effectScope","，迁移风险相对可控。真正需要警惕的是：",[214,507,508,511,514,517,520],{},[217,509,510],{},"直接读取或修改 Vue 响应式内部字段；",[217,512,513],{},"依赖未公开的 effect、Dep 或 scheduler 实现细节；",[217,515,516],{},"自行 monkey patch 响应式函数；",[217,518,519],{},"对 watcher 执行顺序、同步刷新和清理时机有隐含假设；",[217,521,522],{},"库代码同时支持多个 Vue 次版本，却没有覆盖这些边界测试。",[11,524,525],{},"内部重构的意义，正是 Vue 可以在保持公开 API 的同时更换实现。反过来说，依赖内部实现的代码也最容易在这类升级中暴露问题。",[48,527,529],{"id":528},"变化二vapor-mode-不再只是实验概念","变化二：Vapor Mode 不再只是实验概念",[11,531,532],{},"Vapor Mode 是 Vue SFC 的一种新编译模式。传统 Vue 模板会生成 VNode，由 Virtual DOM runtime 对比前后两棵树，再把差异更新到真实 DOM；Vapor 则让编译器提前识别动态部分，生成更直接、粒度更细的更新逻辑。",[11,534,535],{},"它的目标有两个：",[537,538,539,542],"ol",{},[217,540,541],{},"降低应用的基础包体积；",[217,543,544],{},"减少运行时创建、遍历和比较 VNode 的成本。",[11,546,547],{},"官方发布说明称，Vapor 已在第三方 js-framework-benchmark 中达到与 Solid、Svelte 5 相近的级别。这个结论同样应该按“基准场景”理解，而不是把不同框架、不同应用的真实性能压缩成一条排名。",[435,549,551],{"id":550},"vapor-不会在升级后自动开启","Vapor 不会在升级后自动开启",[11,553,554],{},"Vue 3.6 依然默认使用 VDOM。要让一个 SFC 使用 Vapor，需要显式标记：",[274,556,560],{"className":557,"code":558,"language":559,"meta":279,"style":279},"language-vue shiki shiki-themes github-dark github-dark","\u003Cscript setup vapor lang=\"ts\">\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"count++\">\n    Count: {{ count }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","vue",[23,561,562,589,600,604,621,630,634,643,661,666,676],{"__ignoreMap":279},[283,563,564,567,571,574,577,580,583,586],{"class":285,"line":286},[283,565,566],{"class":293},"\u003C",[283,568,570],{"class":569},"sxg3X","script",[283,572,573],{"class":324}," setup",[283,575,576],{"class":324}," vapor",[283,578,579],{"class":324}," lang",[283,581,582],{"class":293},"=",[283,584,585],{"class":300},"\"ts\"",[283,587,588],{"class":293},">\n",[283,590,591,593,596,598],{"class":285,"line":304},[283,592,290],{"class":289},[283,594,595],{"class":293}," { ref } ",[283,597,297],{"class":289},[283,599,301],{"class":300},[283,601,602],{"class":285,"line":311},[283,603,308],{"emptyLinePlaceholder":307},[283,605,606,608,610,612,614,616,619],{"class":285,"line":337},[283,607,314],{"class":289},[283,609,342],{"class":317},[283,611,321],{"class":289},[283,613,325],{"class":324},[283,615,328],{"class":293},[283,617,618],{"class":317},"0",[283,620,334],{"class":293},[283,622,623,626,628],{"class":285,"line":356},[283,624,625],{"class":293},"\u003C\u002F",[283,627,570],{"class":569},[283,629,588],{"class":293},[283,631,632],{"class":285,"line":384},[283,633,308],{"emptyLinePlaceholder":307},[283,635,636,638,641],{"class":285,"line":389},[283,637,566],{"class":293},[283,639,640],{"class":569},"template",[283,642,588],{"class":293},[283,644,645,648,651,654,656,659],{"class":285,"line":402},[283,646,647],{"class":293},"  \u003C",[283,649,650],{"class":569},"button",[283,652,653],{"class":324}," @click",[283,655,582],{"class":293},[283,657,658],{"class":300},"\"count++\"",[283,660,588],{"class":293},[283,662,663],{"class":285,"line":414},[283,664,665],{"class":293},"    Count: {{ count }}\n",[283,667,669,672,674],{"class":285,"line":668},10,[283,670,671],{"class":293},"  \u003C\u002F",[283,673,650],{"class":569},[283,675,588],{"class":293},[283,677,679,681,683],{"class":285,"line":678},11,[283,680,625],{"class":293},[283,682,640],{"class":569},[283,684,588],{"class":293},[11,686,687],{},"官方还支持两个等价入口：",[274,689,691],{"className":557,"code":690,"language":559,"meta":279,"style":279},"\u003Cscript vapor>\n\u002F\u002F \u003Cscript setup vapor> 的简写\n\u003C\u002Fscript>\n",[23,692,693,703,709],{"__ignoreMap":279},[283,694,695,697,699,701],{"class":285,"line":286},[283,696,566],{"class":293},[283,698,570],{"class":569},[283,700,576],{"class":324},[283,702,588],{"class":293},[283,704,705],{"class":285,"line":304},[283,706,708],{"class":707},"sJ8bj","\u002F\u002F \u003Cscript setup vapor> 的简写\n",[283,710,711,713,715],{"class":285,"line":311},[283,712,625],{"class":293},[283,714,570],{"class":569},[283,716,588],{"class":293},[274,718,720],{"className":557,"code":719,"language":559,"meta":279,"style":279},"\u003Ctemplate vapor>\n  \u003C!-- 整个 SFC 使用 Vapor 编译 -->\n\u003C\u002Ftemplate>\n",[23,721,722,732,737],{"__ignoreMap":279},[283,723,724,726,728,730],{"class":285,"line":286},[283,725,566],{"class":293},[283,727,640],{"class":569},[283,729,576],{"class":324},[283,731,588],{"class":293},[283,733,734],{"class":285,"line":304},[283,735,736],{"class":707},"  \u003C!-- 整个 SFC 使用 Vapor 编译 -->\n",[283,738,739,741,743],{"class":285,"line":311},[283,740,625],{"class":293},[283,742,640],{"class":569},[283,744,588],{"class":293},[11,746,747],{},"也就是说，团队可以升级到 3.6 后继续运行现有 VDOM 应用，再有选择地迁移某个组件或页面。",[435,749,751],{"id":750},"纯-vapor-应用","纯 Vapor 应用",[11,753,754],{},"如果应用完全由 Vapor 组件组成，可以使用：",[274,756,758],{"className":276,"code":757,"language":278,"meta":279,"style":279},"import { createVaporApp } from 'vue'\nimport App from '.\u002FApp.vue'\n\ncreateVaporApp(App).mount('#app')\n",[23,759,760,771,783,787],{"__ignoreMap":279},[283,761,762,764,767,769],{"class":285,"line":286},[283,763,290],{"class":289},[283,765,766],{"class":293}," { createVaporApp } ",[283,768,297],{"class":289},[283,770,301],{"class":300},[283,772,773,775,778,780],{"class":285,"line":304},[283,774,290],{"class":289},[283,776,777],{"class":293}," App ",[283,779,297],{"class":289},[283,781,782],{"class":300}," '.\u002FApp.vue'\n",[283,784,785],{"class":285,"line":311},[283,786,308],{"emptyLinePlaceholder":307},[283,788,789,792,795,798,800,803],{"class":285,"line":337},[283,790,791],{"class":324},"createVaporApp",[283,793,794],{"class":293},"(App).",[283,796,797],{"class":324},"mount",[283,799,328],{"class":293},[283,801,802],{"class":300},"'#app'",[283,804,334],{"class":293},[11,806,807],{},"这种模式不需要引入 Virtual DOM runtime，最容易获得基础包体积收益。它更适合小型新应用、交互小工具，或可以明确约束技术栈的独立页面。",[435,809,811],{"id":810},"在现有-vdom-应用中使用-vapor","在现有 VDOM 应用中使用 Vapor",[11,813,814,815,818],{},"现有 ",[23,816,817],{},"createApp()"," 项目需要安装互操作插件：",[274,820,822],{"className":276,"code":821,"language":278,"meta":279,"style":279},"import { createApp, vaporInteropPlugin } from 'vue'\nimport App from '.\u002FApp.vue'\n\ncreateApp(App)\n  .use(vaporInteropPlugin)\n  .mount('#app')\n",[23,823,824,835,845,849,857,868],{"__ignoreMap":279},[283,825,826,828,831,833],{"class":285,"line":286},[283,827,290],{"class":289},[283,829,830],{"class":293}," { createApp, vaporInteropPlugin } ",[283,832,297],{"class":289},[283,834,301],{"class":300},[283,836,837,839,841,843],{"class":285,"line":304},[283,838,290],{"class":289},[283,840,777],{"class":293},[283,842,297],{"class":289},[283,844,782],{"class":300},[283,846,847],{"class":285,"line":311},[283,848,308],{"emptyLinePlaceholder":307},[283,850,851,854],{"class":285,"line":337},[283,852,853],{"class":324},"createApp",[283,855,856],{"class":293},"(App)\n",[283,858,859,862,865],{"class":285,"line":356},[283,860,861],{"class":293},"  .",[283,863,864],{"class":324},"use",[283,866,867],{"class":293},"(vaporInteropPlugin)\n",[283,869,870,872,874,876,878],{"class":285,"line":384},[283,871,861],{"class":293},[283,873,797],{"class":324},[283,875,328],{"class":293},[283,877,802],{"class":300},[283,879,334],{"class":293},[11,881,882],{},"反过来，Vapor 应用也能安装这个插件以容纳 VDOM 组件，但这样会重新带入 VDOM runtime，削弱体积优势。",[11,884,885],{},"Render Function 与 JSX 编写的组件仍然属于 VDOM 组件。在纯 Vapor 应用中使用它们，同样需要互操作。",[11,887,888],{},[424,889],{"alt":890,"src":891},"现有 VDOM 区域通过明确的互操作边界连接到独立 Vapor 区域","\u002Fmedia\u002Fposts\u002Fvue-3-6-rc-upgrade-guide\u002Fvapor-boundaries-v1.webp",[11,893,894,895],{},"我的建议与官方一致：",[15,896,897],{},"把两种渲染模式组织成边界清楚的区域，而不是在每一层组件中来回套娃。",[11,899,900],{},"例如，把一个高频更新的数据画布做成 Vapor 页面或子树，周围的后台导航、弹窗和成熟组件库继续使用 VDOM。这样的收益、故障范围和回退路径都更容易测量。",[48,902,904],{"id":903},"rc2-最容易踩坑的变化事件委托改为显式启用","rc.2 最容易踩坑的变化：事件委托改为显式启用",[11,906,907],{},"如果你在 rc.1 阶段已经试过 Vapor，这一节尤其重要。",[11,909,910,911,914,915,918,919,921],{},"rc.1 的说明中，符合条件的事件会自动委托到 ",[23,912,913],{},"document","。但这与原生 DOM 和标准 Vue 的行为存在差异：如果祖先元素提前调用 ",[23,916,917],{},"stopPropagation()","，事件到不了 ",[23,920,913],{},"，子元素被委托的 handler 也不会执行。",[11,923,924,925,927,928,930],{},"从 ",[15,926,45],{}," 开始，Vapor 默认把 DOM 监听器直接绑定到元素。只有明确希望使用文档级委托时，才添加 Vapor 专用的 ",[23,929,179],{}," 修饰符：",[274,932,934],{"className":557,"code":933,"language":559,"meta":279,"style":279},"\u003Cbutton @click.delegate=\"onClick\">\n  保存\n\u003C\u002Fbutton>\n",[23,935,936,966,971],{"__ignoreMap":279},[283,937,938,940,942,945,948,951,954,956,959,962,964],{"class":285,"line":286},[283,939,566],{"class":293},[283,941,650],{"class":569},[283,943,944],{"class":293}," @",[283,946,947],{"class":324},"click",[283,949,950],{"class":293},".",[283,952,953],{"class":324},"delegate",[283,955,582],{"class":293},[283,957,958],{"class":300},"\"",[283,960,961],{"class":293},"onClick",[283,963,958],{"class":300},[283,965,588],{"class":293},[283,967,968],{"class":285,"line":304},[283,969,970],{"class":293},"  保存\n",[283,972,973,975,977],{"class":285,"line":311},[283,974,625],{"class":293},[283,976,650],{"class":569},[283,978,588],{"class":293},[11,980,981,982,985],{},"同时，旧的 ",[23,983,984],{},"compilerOptions.eventDelegation"," 已被移除。",[11,987,988],{},"迁移时应该做两件事：",[537,990,991,997],{},[217,992,993,994,996],{},"删除已有的 ",[23,995,984],{},"；",[217,998,999,1000,18],{},"只对数量大、事件稳定，并且传播路径已验证的监听器使用 ",[23,1001,179],{},[11,1003,1004],{},"这不是一个适合全局机械替换的优化。事件是否值得委托，要结合节点数量、生命周期和传播语义判断。",[48,1006,1008],{"id":1007},"vapor-与标准-vue-的兼容边界","Vapor 与标准 Vue 的兼容边界",[11,1010,1011],{},"Vapor 的目标不是在第一天覆盖 Vue 的所有历史能力。官方明确说明，它支持现有 Vue API 的一个子集；依赖 VNode 或组件公开实例代理的功能，目前不能直接使用。",[53,1013,1014,1027],{},[56,1015,1016],{},[59,1017,1018,1021,1024],{},[62,1019,1020],{},"能力",[62,1022,1023],{},"VDOM 组件",[62,1025,1026],{},"Vapor 组件",[75,1028,1029,1040,1050,1061,1077,1088,1100,1112,1139],{},[59,1030,1031,1034,1037],{},[80,1032,1033],{},"Composition API",[80,1035,1036],{},"支持",[80,1038,1039],{},"主要编程方式",[59,1041,1042,1045,1047],{},[80,1043,1044],{},"Options API",[80,1046,1036],{},[80,1048,1049],{},"不支持",[59,1051,1052,1057,1059],{},[80,1053,1054],{},[23,1055,1056],{},"app.config.globalProperties",[80,1058,1036],{},[80,1060,1049],{},[59,1062,1063,1068,1071],{},[80,1064,1065],{},[23,1066,1067],{},"getCurrentInstance()",[80,1069,1070],{},"返回当前实例",[80,1072,1073,1074],{},"返回 ",[23,1075,1076],{},"null",[59,1078,1079,1082,1085],{},[80,1080,1081],{},"Render Function \u002F JSX",[80,1083,1084],{},"原生 VDOM",[80,1086,1087],{},"仍是 VDOM，混用需要 interop",[59,1089,1090,1095,1097],{},[80,1091,1092],{},[23,1093,1094],{},"v-memo",[80,1096,1036],{},[80,1098,1099],{},"不适用 \u002F 不支持",[59,1101,1102,1108,1110],{},[80,1103,1104,1107],{},[23,1105,1106],{},"@vue:xxx"," 元素生命周期事件",[80,1109,1036],{},[80,1111,1049],{},[59,1113,1114,1117,1120],{},[80,1115,1116],{},"组件模板引用",[80,1118,1119],{},"暴露公开实例能力",[80,1121,1122,1123,26,1126,26,1129,26,1132,26,1135,1138],{},"不暴露 ",[23,1124,1125],{},"$el",[23,1127,1128],{},"$props",[23,1130,1131],{},"$attrs",[23,1133,1134],{},"$slots",[23,1136,1137],{},"$refs"," 等属性",[59,1140,1141,1144,1147],{},[80,1142,1143],{},"自定义指令",[80,1145,1146],{},"标准指令生命周期对象",[80,1148,1149],{},"使用 Vapor 专用函数接口",[435,1151,1153,1156],{"id":1152},"slotsdefault-不能再当作无副作用探测",[23,1154,1155],{},"slots.default()"," 不能再当作无副作用探测",[11,1158,1159,1160,1162],{},"在 VDOM 世界中，一些组件会先调用 ",[23,1161,1155],{},"，检查返回内容，再决定渲染 fallback。Vapor 中调用 slot 可能直接创建 Block 和 DOM、注册响应式 effect，或在 hydration 时认领已有 SSR DOM。",[11,1164,1165],{},"因此不要这样写：",[274,1167,1169],{"className":557,"code":1168,"language":559,"meta":279,"style":279},"\u003Cscript setup vapor>\nimport { useSlots } from 'vue'\n\nconst slots = useSlots()\nconst content = slots.default?.()\nconst showFallback = !content\n\u003C\u002Fscript>\n",[23,1170,1171,1183,1194,1198,1213,1231,1246],{"__ignoreMap":279},[283,1172,1173,1175,1177,1179,1181],{"class":285,"line":286},[283,1174,566],{"class":293},[283,1176,570],{"class":569},[283,1178,573],{"class":324},[283,1180,576],{"class":324},[283,1182,588],{"class":293},[283,1184,1185,1187,1190,1192],{"class":285,"line":304},[283,1186,290],{"class":289},[283,1188,1189],{"class":293}," { useSlots } ",[283,1191,297],{"class":289},[283,1193,301],{"class":300},[283,1195,1196],{"class":285,"line":311},[283,1197,308],{"emptyLinePlaceholder":307},[283,1199,1200,1202,1205,1207,1210],{"class":285,"line":337},[283,1201,314],{"class":289},[283,1203,1204],{"class":317}," slots",[283,1206,321],{"class":289},[283,1208,1209],{"class":324}," useSlots",[283,1211,1212],{"class":293},"()\n",[283,1214,1215,1217,1220,1222,1225,1228],{"class":285,"line":356},[283,1216,314],{"class":289},[283,1218,1219],{"class":317}," content",[283,1221,321],{"class":289},[283,1223,1224],{"class":293}," slots.",[283,1226,1227],{"class":324},"default",[283,1229,1230],{"class":293},"?.()\n",[283,1232,1233,1235,1238,1240,1243],{"class":285,"line":384},[283,1234,314],{"class":289},[283,1236,1237],{"class":317}," showFallback",[283,1239,321],{"class":289},[283,1241,1242],{"class":289}," !",[283,1244,1245],{"class":293},"content\n",[283,1247,1248,1250,1252],{"class":285,"line":389},[283,1249,625],{"class":293},[283,1251,570],{"class":569},[283,1253,588],{"class":293},[11,1255,1256],{},"让模板负责 slot 的实际渲染，通常更安全：",[274,1258,1260],{"className":557,"code":1259,"language":559,"meta":279,"style":279},"\u003Ctemplate>\n  \u003Cslot \u002F>\n\u003C\u002Ftemplate>\n",[23,1261,1262,1270,1283],{"__ignoreMap":279},[283,1263,1264,1266,1268],{"class":285,"line":286},[283,1265,566],{"class":293},[283,1267,640],{"class":569},[283,1269,588],{"class":293},[283,1271,1272,1274,1277,1281],{"class":285,"line":304},[283,1273,647],{"class":293},[283,1275,1276],{"class":569},"slot",[283,1278,1280],{"class":1279},"sX7ps"," \u002F",[283,1282,588],{"class":293},[283,1284,1285,1287,1289],{"class":285,"line":311},[283,1286,625],{"class":293},[283,1288,640],{"class":569},[283,1290,588],{"class":293},[435,1292,1293],{"id":1293},"自定义指令需要单独迁移",[11,1295,1296,1297,26,1300,26,1303,1306],{},"Vapor 自定义指令接收节点和响应式 getter，并且可以返回 cleanup 函数。它不是把 VDOM 指令的 ",[23,1298,1299],{},"mounted",[23,1301,1302],{},"updated",[23,1304,1305],{},"unmounted"," 对象原样搬过去。",[11,1308,1309],{},"如果项目或组件库依赖大量自定义指令，应该把它们列成独立迁移项，逐个验证响应式更新、清理和 SSR 行为。",[48,1311,1313],{"id":1312},"nuxtrouterpinia-和组件库应该怎么看","Nuxt、Router、Pinia 和组件库应该怎么看",[11,1315,1316],{},"Vue 核心可用，不代表上层框架已经自动完成 Vapor 集成。",[11,1318,1319],{},"Vue 官方的 Vapor Roadmap 单独列出了 Router、Pinia、Nuxt、DevTools 和 Vue Test Utils 等生态工作，其中 Nuxt 还依赖 SSR hydration 能力。对真实项目来说，编译器能否识别 Vapor、服务端产物如何生成、客户端如何 hydration、开发工具怎样检查组件，都是完整链路的一部分。",[11,1321,1322],{},"因此我会把项目分成两类：",[435,1324,1326],{"id":1325},"普通-vue-vite-应用","普通 Vue \u002F Vite 应用",[11,1328,1329],{},"可以在分支中升级 3.6 RC，先验证现有 VDOM 模式，再挑一个叶子页面试用 Vapor。依赖关系比较直接，问题也更容易归因。",[435,1331,1333],{"id":1332},"nuxtssr-或重度组件库应用","Nuxt、SSR 或重度组件库应用",[11,1335,1336],{},"不要仅通过 package override 强行把底层 Vue 换成 RC，就把它视为完成 Vapor 升级。应该先确认当前框架、构建插件和 SSR 链路明确支持对应版本，再进行 hydration、路由切换、异步组件和组件库互操作测试。",[11,1338,1339],{},"即使暂时不使用 Vapor，测试 Vue 3.6 的新响应式内核仍然有价值；只是这类试验最好留在独立分支或测试环境。",[48,1341,1342],{"id":1342},"一套更稳妥的升级路线",[435,1344,1346],{"id":1345},"第一阶段只升级依赖不启用-vapor","第一阶段：只升级依赖，不启用 Vapor",[11,1348,1349],{},"普通 Vue \u002F Vite 项目可以在实验分支中安装 RC：",[274,1351,1355],{"className":1352,"code":1353,"language":1354,"meta":279,"style":279},"language-bash shiki shiki-themes github-dark github-dark","pnpm add vue@3.6.0-rc.2\n","bash",[23,1356,1357],{"__ignoreMap":279},[283,1358,1359,1362,1365],{"class":285,"line":286},[283,1360,1361],{"class":324},"pnpm",[283,1363,1364],{"class":300}," add",[283,1366,1367],{"class":300}," vue@3.6.0-rc.2\n",[11,1369,1370,1371,1374],{},"如果项目直接依赖 ",[23,1372,1373],{},"@vue\u002Fserver-renderer","，让它与 Vue 保持同一版本：",[274,1376,1378],{"className":1352,"code":1377,"language":1354,"meta":279,"style":279},"pnpm add vue@3.6.0-rc.2 @vue\u002Fserver-renderer@3.6.0-rc.2\n",[23,1379,1380],{"__ignoreMap":279},[283,1381,1382,1384,1386,1389],{"class":285,"line":286},[283,1383,1361],{"class":324},[283,1385,1364],{"class":300},[283,1387,1388],{"class":300}," vue@3.6.0-rc.2",[283,1390,1391],{"class":300}," @vue\u002Fserver-renderer@3.6.0-rc.2\n",[11,1393,1394],{},"然后先验证原有 VDOM 应用：",[214,1396,1397,1400,1403,1406,1409,1412,1415,1418],{},[217,1398,1399],{},"单元测试与组件测试；",[217,1401,1402],{},"首屏 SSR 与客户端 hydration；",[217,1404,1405],{},"watch、computed、effectScope 的复杂场景；",[217,1407,1408],{},"快速路由切换后的副作用清理；",[217,1410,1411],{},"自定义指令、Teleport、Suspense 和异步组件；",[217,1413,1414],{},"开发与生产构建；",[217,1416,1417],{},"浏览器控制台 warning 和错误；",[217,1419,1420],{},"关键交互的耗时与内存基线。",[11,1422,1423],{},"如果这一阶段失败，问题大概率来自新响应式实现或 RC 回归，而不是 Vapor，定位会简单得多。",[435,1425,1427],{"id":1426},"第二阶段选择一个边界清楚的区域","第二阶段：选择一个边界清楚的区域",[11,1429,1430],{},"合适的试点通常同时满足：",[214,1432,1433,1436,1439,1442,1445,1448],{},[217,1434,1435],{},"使用 Composition API；",[217,1437,1438],{},"很少依赖组件实例；",[217,1440,1441],{},"不依赖复杂的 VDOM 组件库；",[217,1443,1444],{},"更新频率高，确实存在性能压力；",[217,1446,1447],{},"有独立路由或明确的组件树边界；",[217,1449,1450],{},"有可重复的性能测试。",[11,1452,1453],{},"先记录迁移前的 JavaScript 体积、交互延迟、CPU 时间和内存，再启用 Vapor。没有基线，就很容易把“技术上成功运行”误判成“值得迁移”。",[435,1455,1457],{"id":1456},"第三阶段验证互操作与-ssr","第三阶段：验证互操作与 SSR",[11,1459,1460],{},"至少覆盖这些组合：",[537,1462,1463,1466,1469,1472,1475,1478,1481],{},[217,1464,1465],{},"VDOM 父组件嵌套 Vapor 子组件；",[217,1467,1468],{},"Vapor 父组件嵌套 VDOM 子组件；",[217,1470,1471],{},"props、emit 与双向绑定；",[217,1473,1474],{},"默认 slot、具名 slot 与作用域 slot；",[217,1476,1477],{},"Suspense、异步组件与错误边界；",[217,1479,1480],{},"服务端输出、hydration 和 mismatch 恢复；",[217,1482,1483],{},"组件卸载后的 watcher、事件与指令 cleanup。",[11,1485,1486],{},"rc.2 的修复列表中有相当多内容正好集中在 hydration、Suspense、slot anchor 和 VDOM interop。这说明这些区域正在快速收敛，也说明它们是当前最值得测试的地方。",[435,1488,1490],{"id":1489},"第四阶段等稳定版再决定生产节奏","第四阶段：等稳定版再决定生产节奏",[11,1492,1493],{},"RC 的意义是功能集已经接近确定，接下来集中发现回归和边缘问题；它不等于生态已经完全稳定。",[11,1495,1496],{},"生产项目至少应该同时满足：",[214,1498,1499,1502,1505,1508,1511,1514],{},[217,1500,1501],{},"Vue 3.6 正式版已发布；",[217,1503,1504],{},"使用的框架和构建工具明确支持；",[217,1506,1507],{},"核心组件库通过互操作验证；",[217,1509,1510],{},"DevTools、测试工具和 SSR 链路可用；",[217,1512,1513],{},"性能收益足以覆盖迁移与维护成本；",[217,1515,1516],{},"有随时退回 VDOM 的方案。",[48,1518,1519],{"id":1519},"不建议做的四件事",[435,1521,1523],{"id":1522},"_1-不要把-rc-当成普通补丁版","1. 不要把 RC 当成普通补丁版",[11,1525,1526],{},"预发布阶段的行为仍可能调整。rc.1 到 rc.2 的事件委托变化，就是最直接的例子。",[435,1528,1530],{"id":1529},"_2-不要为了用上-vapor迁移全部组件","2. 不要为了“用上 Vapor”迁移全部组件",[11,1532,1533],{},"导航、静态内容、低频设置页未必能获得有意义的收益。优先迁移性能瓶颈，而不是追求迁移比例。",[435,1535,1537],{"id":1536},"_3-不要把微基准数字当作应用承诺","3. 不要把微基准数字当作应用承诺",[11,1539,1540],{},"“超过 30 倍”来自特定响应式压力场景；“与 Solid、Svelte 5 同级”来自第三方基准。它们适合证明技术方向，不适合替代项目测量。",[435,1542,1544],{"id":1543},"_4-不要忽略生态边界","4. 不要忽略生态边界",[11,1546,1547],{},"Vue 核心、SFC 编译器、Vite 插件、Nuxt、SSR、Router、Pinia、组件库、DevTools 和测试工具共同组成开发体验。只让其中一个包进入 RC 版本，不代表整条链路已经升级完毕。",[48,1549,1550],{"id":1550},"我的项目类型建议",[53,1552,1553,1566],{},[56,1554,1555],{},[59,1556,1557,1560,1563],{},[62,1558,1559],{},"项目类型",[62,1561,1562],{},"现在是否值得试",[62,1564,1565],{},"建议",[75,1567,1568,1579,1590,1601,1612,1623],{},[59,1569,1570,1573,1576],{},[80,1571,1572],{},"小型新工具、内部实验",[80,1574,1575],{},"值得",[80,1577,1578],{},"可以尝试纯 Vapor，重点测包体积与交互",[59,1580,1581,1584,1587],{},[80,1582,1583],{},"已有 Vue SPA",[80,1585,1586],{},"值得在分支试",[80,1588,1589],{},"先保持 VDOM，再迁移单个性能敏感页面",[59,1591,1592,1595,1598],{},[80,1593,1594],{},"Nuxt \u002F SSR 站点",[80,1596,1597],{},"适合研究，生产宜等待",[80,1599,1600],{},"先确认框架支持，重点测 hydration",[59,1602,1603,1606,1609],{},[80,1604,1605],{},"组件库",[80,1607,1608],{},"应尽早做兼容测试",[80,1610,1611],{},"检查实例代理、slots、自定义指令和 interop",[59,1613,1614,1617,1620],{},[80,1615,1616],{},"大型数据看板 \u002F 编辑器",[80,1618,1619],{},"很值得压测",[80,1621,1622],{},"单独比较 alien-signals 与 Vapor 各自带来的收益",[59,1624,1625,1628,1631],{},[80,1626,1627],{},"内容型官网",[80,1629,1630],{},"优先级较低",[80,1632,1633],{},"等稳定版和生态成熟，避免为有限收益增加复杂度",[48,1635,1636],{"id":1636},"最后的判断",[11,1638,1639],{},"Vue 3.6 RC 最有价值的地方，不是提供了多少个可以立刻写进业务的新 API，而是同时推进了两个长期问题：",[214,1641,1642,1645],{},[217,1643,1644],{},"Vue 的响应式系统能否在更复杂的依赖图中保持高效；",[217,1646,1647],{},"Vue 的模板能否在保留熟悉开发体验的同时，摆脱必须依赖虚拟 DOM 的成本。",[11,1649,1650],{},"alien-signals 回答第一个问题，Vapor 尝试回答第二个问题。",[11,1652,1653,1654,1657],{},"对于现有项目，我认为最合理的策略是：",[15,1655,1656],{},"先把 3.6 当作响应式内核升级来测试，再把 Vapor 当作可选的局部编译模式来评估。"," 两件事分开验证，才能知道性能变化来自哪里，也能把风险控制在清晰的边界内。",[11,1659,1660],{},"Vue 3.6 还没有到“所有人今天就应该升级”的阶段，但它已经到了“值得所有 Vue 团队开始理解”的阶段。",[1662,1663],"hr",{},[48,1665,1666],{"id":1666},"资料说明",[214,1668,1669,1679,1687,1695,1703,1711],{},[217,1670,1671,1678],{},[1672,1673,1677],"a",{"href":1674,"rel":1675},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fcore\u002Fblob\u002Fminor\u002FCHANGELOG.md",[1676],"nofollow","Vue 3.6 minor 分支 Changelog","：3.6.0-rc.1 的 Vapor 总览、兼容边界，以及 rc.2 的事件委托变更。",[217,1680,1681,1686],{},[1672,1682,1685],{"href":1683,"rel":1684},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fcore\u002Freleases\u002Ftag\u002Fv3.6.0-rc.2",[1676],"Vue 3.6.0-rc.2 Release","：本文发布时的最新候选版本。",[217,1688,1689,1694],{},[1672,1690,1693],{"href":1691,"rel":1692},"https:\u002F\u002Fblog.vuejs.org\u002Fposts\u002Fvue-3-5",[1676],"Vue 3.5 发布说明","：Vue 3.5 的响应式优化、SSR 与开发者 API 基线。",[217,1696,1697,1702],{},[1672,1698,1701],{"href":1699,"rel":1700},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fcore\u002Fpull\u002F12349",[1676],"Vue core：alien-signals 重构 PR","：响应式实现、内存与特定压力场景微基准。",[217,1704,1705,1710],{},[1672,1706,1709],{"href":1707,"rel":1708},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fcore\u002Fissues\u002F13687",[1676],"Vapor Mode Roadmap","：核心能力与 Vue 生态集成路线。",[217,1712,1713,1718],{},[1672,1714,1717],{"href":1715,"rel":1716},"https:\u002F\u002Fgithub.com\u002Fkrausest\u002Fjs-framework-benchmark",[1676],"js-framework-benchmark","：Vue 官方发布说明引用的第三方前端框架基准。",[38,1720,1721],{},[11,1722,1723],{},"本文中的升级建议是我基于官方资料和工程经验做出的判断，文章由 AI 协助资料整理与语言校对；具体项目仍应以自身测试结果为准。",[1725,1726,1727],"style",{},"html pre.shiki code .sOPea, html code.shiki .sOPea{--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .suv1-, html code.shiki .suv1-{--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .s4wv1, html code.shiki .s4wv1{--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .s8ozJ, html code.shiki .s8ozJ{--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .sFR8T, html code.shiki .sFR8T{--shiki-default:#B392F0;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sxg3X, html code.shiki .sxg3X{--shiki-default:#85E89D;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sX7ps, html code.shiki .sX7ps{--shiki-default:#FDAEB7;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":279,"searchDepth":311,"depth":311,"links":1729},[1730,1731,1732,1737,1742,1743,1748,1752,1758,1764,1765,1766],{"id":50,"depth":304,"text":51},{"id":208,"depth":304,"text":209},{"id":261,"depth":304,"text":262,"children":1733},[1734,1735,1736],{"id":437,"depth":311,"text":437},{"id":465,"depth":311,"text":465},{"id":488,"depth":311,"text":488},{"id":528,"depth":304,"text":529,"children":1738},[1739,1740,1741],{"id":550,"depth":311,"text":551},{"id":750,"depth":311,"text":751},{"id":810,"depth":311,"text":811},{"id":903,"depth":304,"text":904},{"id":1007,"depth":304,"text":1008,"children":1744},[1745,1747],{"id":1152,"depth":311,"text":1746},"slots.default() 不能再当作无副作用探测",{"id":1293,"depth":311,"text":1293},{"id":1312,"depth":304,"text":1313,"children":1749},[1750,1751],{"id":1325,"depth":311,"text":1326},{"id":1332,"depth":311,"text":1333},{"id":1342,"depth":304,"text":1342,"children":1753},[1754,1755,1756,1757],{"id":1345,"depth":311,"text":1346},{"id":1426,"depth":311,"text":1427},{"id":1456,"depth":311,"text":1457},{"id":1489,"depth":311,"text":1490},{"id":1519,"depth":304,"text":1519,"children":1759},[1760,1761,1762,1763],{"id":1522,"depth":311,"text":1523},{"id":1529,"depth":311,"text":1530},{"id":1536,"depth":311,"text":1537},{"id":1543,"depth":311,"text":1544},{"id":1550,"depth":304,"text":1550},{"id":1636,"depth":304,"text":1636},{"id":1666,"depth":304,"text":1666},"截至 Vue 3.6.0-rc.2，系统对比 Vue 3.5 与 3.6 的响应式内核、Vapor Mode、事件委托、互操作边界和渐进升级策略。",false,null,"md",{"src":1772,"alt":1773,"caption":1774,"width":1775,"height":1776},"\u002Fmedia\u002Fposts\u002Fvue-3-6-rc-upgrade-guide\u002Fcover-v1.webp","Vue 3.5 的虚拟 DOM 组件树经过晶体通道转向 Vue 3.6 的细粒度信号网络","Vue 3.6 RC 更像一次编译器与运行时的架构换挡，而不是一份新 API 清单",1600,900,{},"\u002Fblog\u002Fvue-3-6-rc-upgrade-guide","2026-07-26",18,{"title":5,"description":1767},"blog\u002Fvue-3-6-rc-upgrade-guide",[1784,1785,1786],"Vue","JavaScript","前端工程","90kB3giNZBguJRcl7lFnw6zSSsK7k7YgTuWATo_cMIQ",[1789,1769],{"title":1790,"path":1791,"stem":1792,"description":1793,"children":-1},"AI 系统的可观测性，不只是 Token 账单","\u002Fblog\u002Fobservable-ai-systems","blog\u002Fobservable-ai-systems","从提示词到工具调用，再到用户可见结果，AI 应用需要一条能解释“为什么”的观测链路。",1785034337140]