Vue 3.5+ 响应式 Props 解构、useTemplateRef 与 Vapor Mode（无虚拟 DOM 编译模式）底层原理是什么？
Vue 3.5 及正在落地的 Vapor Mode（无虚拟 DOM 编译模式） 标志着 Vue 编译器与响应式系统进入了更加简洁、极速的新阶段。
一、 Vue 3.5+ 三大高价值开发体验升级
- 响应式 Props 解构（Reactive Props Destructure 正式转正）：
在 Vue 3.2 中，const { count = 0 } = defineProps(['count'])解构出的count会沦为普通死常量，必须用繁琐的withDefaults+toRefs。在 Vue 3.5+ 中，编译器在 AST 扫描阶段识别所有来自defineProps解构出的标识符，并将组件内部对该变量的读取自动重写为__props.count访问，既拥有原生 JS 默认值语法，又 100% 保持响应式追踪！ useTemplateRef('inputEl')专用模板引用 API：
取代了过去既用于响应式数据又用于 DOM 引用的同名const inputEl = ref(null)混淆写法，支持动态字符串 ref 键名且类型推导更清晰。onWatcherCleanup()副作用清理函数：
无需再通过watch(id, (val, oldVal, onCleanup) => ...)的第三个参数获取清理钩子，可在同步执行期间任意辅助函数内直接调用onWatcherCleanup(() => controller.abort())。
<!-- Vue 3.5+ 现代化标准组件写法 -->
<script setup lang="ts">
import { watch, useTemplateRef, onWatcherCleanup } from 'vue'
// 1. 原生响应式 Props 解构 + 原生默认值（编译后读取 count 自动转化为 __props.count）
const { count = 1, apiUrl } = defineProps<{ count?: number; apiUrl: string }>()
// 2. 语义明确的模板 DOM 引用
const chartEl = useTemplateRef<HTMLDivElement>('chartContainer')
// 3. 直接侦听解构出的响应式变量（编译器自动包装为 getter: () => __props.count）
watch(() => count, (newCount) => {
const timer = setTimeout(() => console.log('Updated:', newCount, chartEl.value), 300)
onWatcherCleanup(() => clearTimeout(timer))
})
</script>
<template>
<div ref="chartContainer">当前计数：{{ count }}</div>
</template>二、 Vue Vapor Mode（无虚拟 DOM 模式）是如何工作的？
传统 Vue 3 组件将 <template> 编译为生成虚拟 DOM（VNode）的 render() 函数；而 Vapor Mode（灵感源自 SolidJS）在编译期直接将 <template> 编译为：1. 一次性克隆静态 <template> HTML 字符串生成真实 DOM；2. 使用 renderEffect 将响应式信号直接绑定到具体真实 DOM 节点的 .textContent 或 .setAttribute 上！
// Vapor Mode 编译产物示意：彻底消灭 VNode 创建与 Patch Diff 开销！
import { template as _template, renderEffect as _renderEffect, setText as _setText } from 'vue/vapor'
const t0 = _template('<div class="card"><span></span></div>')
export function render(_ctx) {
const n0 = t0() // 直接 cloneNode(true) 一次性生成真实 DOM 树
const n1 = n0.firstChild
// 细粒度直连：当 _ctx.count 改变时，直接修改真实 DOM n1 的文本，零 VDOM 参与！
_renderEffect(() => _setText(n1, _ctx.count))
return n0
}