Vue 3.5 深度实战：当前端框架学会「编译时优化」——从 Composition API 到 Vapor Mode 的性能革命完全指南（2026）

摘要：Vue 3.5 "Tengen Toppa Gurren Lagann" 版本在 2026 年已成为前端开发的生产标准。本次更新包含响应式系统底层重构（内存占用降低 56%）、Reactive Props 解构稳定化、SSR 懒水合、Vapor Mode 编译时优化等革命性特性。本文将深入剖析 Vue 3.5 的核心设计变革、性能优化原理、新 API 实战，并通过完整的生产级案例展示如何从 Vue 2/3 早期版本平滑升级到 3.5+。

目录

1. 背景介绍：Vue 3 的进化之路
2. Vue 3.5 核心架构解析
3. 响应式系统重构：双向链表与版本计数
4. Reactive Props 解构：告别 props.xxx
5. SSR 革命：懒水合与 useId()
6. Vapor Mode：编译时优化的终极形态
7. 新 API 完全指南
8. 性能基准测试与优化策略
9. 实战案例：从 Vue 2 到 Vue 3.5 的平滑升级
10. 总结与展望：前端框架的下一个十年

1. 背景介绍：Vue 3 的进化之路

1.1 Vue 版本演进时间线

timeline
    title Vue 版本演进
    2020 : Vue 3.0 "One Piece" 发布
         引入 Composition API
         基于 Proxy 的响应式系统
         
    2021 : Vue 3.2 发布
         引入 `<script setup>` 语法糖
         引入 `defineProps` / `defineEmits`
         
    2022 : Vue 3.3 发布
         引入 `defineModel`
         引入 `toRef` / `toValue`
         
    2024 : Vue 3.5 "Tengen Toppa Gurren Lagann" 发布
         响应式系统重构（内存 -56%）
         Reactive Props 解构稳定化
         SSR 懒水合
         Vapor Mode 实验性发布
         
    2026 : Vue 3.6+ 持续演进
         Vapor Mode 进入稳定版
         与 Signals 标准深度集成

1.2 Vue 3.5 的核心设计哲学

Vue 3.5 的更新可以归纳为三大方向：

1. 性能优先：响应式系统底层重构，内存占用降低 56%，大型数组操作性能提升 10 倍。
2. 开发体验：Reactive Props 解构、<script setup> 语法增强，让代码更简洁。
3. SSR 能力：懒水合、useId()、data-allow-mismatch，解决服务端渲染的痛点。

2. Vue 3.5 核心架构解析

2.1 编译时优化：从 Virtual DOM 到 Block Tree

Vue 3.5 的编译器进行了深度优化，生成的代码比 Vue 3.0 更高效。

Vue 3.0 的 Virtual DOM Diff 策略：

// Vue 3.0：全量对比（简化版）
function patch(oldVNode, newVNode) {
  // 递归对比整个 VNode 树
  if (oldVNode.tag !== newVNode.tag) {
    replace(oldVNode, newVNode)
  } else {
    patchChildren(oldVNode.children, newVNode.children)
  }
}

Vue 3.5 的 Block Tree 优化：

<template>
  <div>
    <!-- 静态节点：编译时提升 -->
    <h1>标题</h1>
    <p>静态内容</p>
    
    <!-- 动态节点：运行时只对比动态部分 -->
    <div>{{ count }}</div>
    <button @click="increment">点击</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

编译后的渲染函数（Vue 3.5）：

// 编译生成的代码（简化版）
import { createBlock, openBlock, toDisplayString } from 'vue'

function render(_ctx) {
  return openBlock(), createBlock('div', null, [
    // 静态节点被提升（只创建一次）
    _hoisted_1,
    _hoisted_2,
    
    // 动态节点：带 PatchFlag 的优化
    createVNode('div', null, toDisplayString(_ctx.count), 1 /* TEXT */),
    createVNode('button', { onClick: _ctx.increment }, '点击', 8 /* PROPS */)
  ])
}

// 静态节点提升
const _hoisted_1 = createVNode('h1', null, '标题')
const _hoisted_2 = createVNode('p', null, '静态内容')

性能提升原理：

1. 静态提升（Static Hoisting）：静态节点只创建一次，后续渲染直接复用。
2. PatchFlag：编译时标记动态节点，运行时只对比标记的部分。
3. Tree Flattening：Block Tree 将模板扁平化，减少递归深度。

2.2 响应式系统的三层架构

Vue 3.5 的响应式系统分为三层：

┌─────────────────────────────────────────────────────────┐
│                    Target 层                           │
│  （原始对象：reactive(obj)、ref(value)）           │
└─────────────────────────────────────────────────────────┘
                          ↓ Proxy 拦截
┌─────────────────────────────────────────────────────────┐
│                    Dep 层                              │
│  （依赖：每个属性对应一个 Dep，存储订阅者链表）       │
└─────────────────────────────────────────────────────────┘
                          ↓ 依赖收集
┌─────────────────────────────────────────────────────────┐
│                    Sub 层                              │
│  （订阅者：watchEffect、watch、render 函数）        │
└─────────────────────────────────────────────────────────┘

3. 响应式系统重构：双向链表与版本计数

3.1 Vue 3.5 之前的响应式模型

在 Vue 3.5 之前，响应式系统使用 Set 存储订阅者：

// Vue 3.0 - 3.4 的实现（简化版）
class Dep {
  subs: Set<Sub> = new Set()
  
  depend(sub: Sub) {
    this.subs.add(sub)
  }
  
  notify() {
    this.subs.forEach(sub => sub.update())
  }
}

问题：

1. 内存占用高：每个 Dep 都有一个 Set，即使没有被订阅。
2. 清理成本高：组件销毁时，需要遍历所有 Dep 来清理订阅。
3. 大型数组操作慢：array.push() 会触发多次依赖通知，每次都要遍历 Set。

3.2 Vue 3.5 的双向链表模型

Vue 3.5 引入了 双向链表（Doubly Linked List）来替代 Set：

// Vue 3.5 的实现（简化版）
class Dep {
  subs: Link | null = null  // 链表头/尾（实际是尾）
  prevSub: Link | null = null
}

class Sub {
  deps: Link | null = null  // 订阅的依赖链表
}

// 链表节点
class Link {
  sub: Sub       // 指向订阅者
  dep: Dep       // 指向依赖
  prev: Link | null  // 前一个节点
  next: Link | null  // 后一个节点
  version: number   // 版本号（用于优化）
}

依赖收集过程（双向链表操作）：

function track(dep: Dep, sub: Sub) {
  const link = new Link(sub, dep)
  
  // 1. 将 link 插入 dep 的链表
  if (dep.subs) {
    dep.subs.next = link
    link.prev = dep.subs
  }
  dep.subs = link
  
  // 2. 将 link 插入 sub 的链表
  if (sub.deps) {
    sub.deps.next = link
    link.prevSub = sub.deps
  }
  sub.deps = link
}

清理过程（组件销毁时）：

function cleanup(sub: Sub) {
  let link = sub.deps
  while (link) {
    // 从 dep 的链表中移除
    if (link.prev) link.prev.next = link.next
    if (link.next) link.next.prev = link.prev
    
    // 移动到下一个
    link = link.nextSub
  }
  sub.deps = null
}

性能提升数据（官方基准测试）：

3.3 实战：大型数据表格的性能对比

<template>
  <div>
    <button @click="addItems">添加 10000 条数据</button>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const items = ref([])

function addItems() {
  const start = performance.now()
  
  // Vue 3.5 中，这个操作快 10 倍
  for (let i = 0; i < 10000; i++) {
    items.value.push({
      id: i,
      name: `Item ${i}`,
      value: Math.random()
    })
  }
  
  const end = performance.now()
  console.log(`耗时：${end - start} ms`)
}
</script>

4. Reactive Props 解构：告别 props.xxx

4.1 Vue 3.4 及之前的写法

<script setup>
const props = defineProps<{
  count: number
  msg: string
}>()

// 访问 props 必须使用 `props.xxx`
console.log(props.count)
console.log(props.msg)

// 带默认值的写法（繁琐）
const propsWithDefaults = withDefaults(
  defineProps<{
    count?: number
    msg?: string
  }>(),
  {
    count: 0,
    msg: 'hello'
  }
)
</script>

4.2 Vue 3.5 的稳定特性：Reactive Props 解构

<script setup>
// ✅ Vue 3.5：直接解构，保持响应式！
const { count = 0, msg = 'hello' } = defineProps<{
  count?: number
  msg?: string
}>()

// 直接访问，不需要 `props.`
console.log(count)  // 响应式
console.log(msg)    // 响应式

// 在 watch 中使用
watch(() => count, (newVal) => {
  console.log(`count 变为 ${newVal}`)
})

// 传入 composable（需要包装成 getter）
useMyComposable(() => count)
</script>

底层原理：

编译器会将解构后的变量自动转换为 props.xxx：

// 编译后的代码（简化版）
const props = defineProps(/* ... */)

// 解构被编译成 getter
const count = computed(() => props.count)
const msg = computed(() => props.msg)

4.3 注意事项与限制

<script setup>
const { count, items } = defineProps<{
  count: number
  items: Item[]
}>()

// ❌ 错误：直接 watch 解构后的变量
watch(count, (val) => {})  // 编译时报错！

// ✅ 正确：包装成 getter
watch(() => count, (val) => {})

// ✅ 正确：使用 `toRefs`
const props = defineProps(/* ... */)
const { count, items } = toRefs(props)
watch(count, (val) => {})

// ❌ 错误：解构后立即修改（props 是只读的）
count = 10  // 报错！

// ✅ 正确：在子组件中触发事件让父组件修改
const emit = defineEmits<{
  'update:count': [value: number]
}>()
emit('update:count', 10)
</script>

5. SSR 革命：懒水合与 useId()

5.1 问题背景：SSR 的水合性能瓶颈

传统 SSR 流程：

1. Server：渲染 HTML → 发送给客户端
2. Client：加载 JavaScript
3. Client：执行 Vue，重建组件树（Hydration）
4. Client：将事件监听器绑定到静态 HTML

问题：如果页面有大量组件（例如一个长列表），即使大部分组件不在视口中，客户端也会立即水合它们，导致 TTI（Time to Interactive） 很高。

5.2 Vue 3.5 的解决方案：Lazy Hydration

<!-- App.vue -->
<script setup>
import { defineAsyncComponent, hydrateOnVisible, hydrateOnIdle } from 'vue'

// 策略 1：当组件进入视口时才水合
const HeavyChart = defineAsyncComponent({
  loader: () => import('./HeavyChart.vue'),
  hydrate: hydrateOnVisible({ rootMargin: '200px' })
})

// 策略 2：当浏览器空闲时才水合
const CommentSection = defineAsyncComponent({
  loader: () => import('./CommentSection.vue'),
  hydrate: hydrateOnIdle()
})

// 策略 3：自定义水合时机
const CustomComponent = defineAsyncComponent({
  loader: () => import('./Custom.vue'),
  hydrate: (hydrate) => {
    // 你可以在这里访问 store、router 等
    if (someCondition) {
      hydrate()  // 手动触发水合
    }
  }
})
</script>

<template>
  <div>
    <h1>首页</h1>
    
    <!-- 首屏关键内容：立即水合 -->
    <HeroSection />
    
    <!-- 非关键内容：懒水合 -->
    <HeavyChart />           <!-- 进入视口后才水合 -->
    <CommentSection />     <!-- 浏览器空闲时才水合 -->
  </div>
</template>

性能提升（真实案例）：

5.3 useId()：解决 SSR 的 ID 不匹配问题

问题场景：

<!-- 在 SSR 中，服务端和客户端需要生成相同的 ID -->
<script setup>
// ❌ 错误：服务端和客户端生成的 ID 不同
const id = Math.random().toString(36)

// ❌ 错误：使用 `Date.now()` 也会有误差
const id = `input-${Date.now()}`
</script>

<template>
  <label :for="id">名字：</label>
  <input :id="id" type="text" />
</template>

Vue 3.5 的解决方案：

<script setup>
import { useId } from 'vue'

// ✅ 正确：服务端和客户端生成相同的 ID
const id = useId()
</script>

<template>
  <label :for="id">名字：</label>
  <input :id="id" type="text" />
</template>

useId() 的原理：

// Vue 3.5 内部实现（简化版）
let currentId = 0

function useId(): string {
  const instance = getCurrentInstance()
  
  // 服务端：生成确定性 ID
  if (isSSR) {
    return `vue-id-${instance.uid}-${currentId++}`
  }
  
  // 客户端：从 HTML 中读取服务端生成的 ID
  const ssrId = instance.vnode.el?.getAttribute('data-vue-id')
  if (ssrId) {
    return ssrId
  }
  
  // 客户端独立运行（无 SSR）：生成新 ID
  return `vue-id-${instance.uid}-${currentId++}`
}

5.4 data-allow-mismatch：优雅处理不可避免的 mismatch

<template>
  <!-- 场景：服务端渲染时间和客户端不同 -->
  <span data-allow-mismatch>{{ new Date().toLocaleString() }}</span>
  
  <!-- 限制 mismatch 类型 -->
  <span data-allow-mismatch="text">{{ new Date().toLocaleString() }}</span>
  
  <!-- 可选值：text、children、class、style、attribute -->
</template>

6. Vapor Mode：编译时优化的终极形态

6.1 什么是 Vapor Mode？

Vapor Mode 是 Vue 3.5 引入的实验性特性（2026 年已进入稳定版），它允许将模板 编译为直接操作 DOM 的指令，完全跳过 Virtual DOM。

传统 Vue 渲染流程：

模板 → 编译为渲染函数 → 生成 Virtual DOM → Diff → 更新真实 DOM

Vapor Mode 渲染流程：

模板 → 编译为直接操作 DOM 的指令 → 更新真实 DOM（无 Virtual DOM）

6.2 启用 Vapor Mode

<!-- 在组件层面启用 -->
<script setup vapor>
import { ref } from 'vue'

const count = ref(0)
function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

编译后的代码（简化版）：

// 传统模式：通过 Virtual DOM
function render(_ctx) {
  return createVNode('button', { onClick: _ctx.increment }, _ctx.count)
}

// Vapor Mode：直接操作 DOM
function render(_ctx, container) {
  const button = document.createElement('button')
  button.textContent = _ctx.count
  
  // 事件监听
  button.addEventListener('click', _ctx.increment)
  
  // 更新逻辑（编译时生成）
  watchEffect(() => {
    button.textContent = _ctx.count
  })
  
  container.appendChild(button)
}

6.3 Vapor Mode 的性能表现

基准测试（10 万个组件实例化）：

适用场景：

• ✅ 高频更新的组件（例如实时数据大屏）
• ✅ 大量列表项（例如虚拟滚动列表）
• ✅ 对包体积敏感的组件（Vapor Mode 的运行时更小）

限制：

• ❌ 不能使用 <Teleport>、<Suspense> 等运行时特性
• ❌ 不能使用动态 :is 绑定
• ⚠️ 部分生态库可能不兼容（需要等待更新）

7. 新 API 完全指南

7.1 useTemplateRef()：更灵活的模板 Ref

Vue 3.5 之前的写法：

<script setup>
import { ref, onMounted } from 'vue'

// 需要事先声明 ref 变量名与 template 中的 ref 属性名一致
const inputRef = ref<HTMLInputElement | null>(null)

onMounted(() => {
  inputRef.value?.focus()
})
</script>

<template>
  <!-- ref 属性名必须与变量名一致 -->
  <input ref="inputRef" />
</template>

Vue 3.5 的新写法：

<script setup>
import { useTemplateRef, onMounted } from 'vue'

// 使用字符串 ID（更灵活）
const inputRef = useTemplateRef<HTMLInputElement>('myInput')

onMounted(() => {
  inputRef.value?.focus()
})

// 动态 ref 绑定
const dynamicRef = useTemplateRef<HTMLElement>(() => someCondition ? 'refA' : 'refB')
</script>

<template>
  <input ref="myInput" />
</template>

7.2 Deferred Teleport：解决 Teleport 的挂载顺序问题

问题场景：

<!-- ❌ Vue 3.5 之前：报错！因为 #container 还没渲染 -->
<template>
  <Teleport to="#container">
    <div>内容</div>
  </Teleport>
  
  <div id="container"></div>
</template>

Vue 3.5 的解决方案：

<!-- ✅ 使用 `defer` 属性 -->
<template>
  <Teleport defer to="#container">
    <div>内容</div>
  </Teleport>
  
  <div id="container"></div>
</template>

原理：defer 会将 Teleport 的挂载延迟到当前渲染周期结束后。

7.3 onWatcherCleanup()：更精细的 watcher 控制

<script setup>
import { watch, onWatcherCleanup } from 'vue'

watch(() => someSource, (newVal) => {
  // 每次 watch 回调重新执行前，会先执行清理函数
  const controller = new AbortController()
  
  onWatcherCleanup(() => {
    controller.abort()  // 取消上一次的请求
  })
  
  // 发起新请求
  fetch(`/api/data?q=${newVal}`, { signal: controller.signal })
    .then(res => res.json())
    .then(data => { /* 处理数据 */ })
})
</script>

8. 性能基准测试与优化策略

8.1 大型应用性能对比

测试场景：一个包含 1000 个组件的仪表盘页面。

8.2 优化策略 1：合理使用 shallowRef / shallowReactive

<script setup>
import { shallowRef, shallowReactive, markRaw } from 'vue'

// ❌ 错误：大型数据对象使用 deep reactivity
const largeData = ref({
  items: [],      // 10000+ 条数据
  metadata: {}    // 大量嵌套对象
})

// ✅ 正确：使用 shallowRef（只对 .value 赋值触发响应）
const largeData = shallowRef({ items: [], metadata: {} })

function updateData() {
  // 需要整体替换（shallowRef 只追踪 .value 的变化）
  largeData.value = { items: newItems, metadata: newMetadata }
}

// ✅ 正确：标记不需要响应式的数据
const staticConfig = markRaw({
  apiEndpoint: '/api/v1',
  timeout: 5000
})
</script>

8.3 优化策略 2：虚拟滚动大型列表

<script setup>
import { ref, computed } from 'vue'

const allItems = ref(/* 10000+ 条数据 */ [])
const containerRef = ref<HTMLElement | null>(null)
const scrollTop = ref(0)
const containerHeight = 500
const itemHeight = 50

// 可见数据（只渲染视口内的项）
const visibleItems = computed(() => {
  const start = Math.floor(scrollTop.value / itemHeight)
  const end = Math.min(
    start + Math.ceil(containerHeight / itemHeight) + 5,  // +5 是 overscan
    allItems.value.length
  )
  
  return allItems.value.slice(start, end).map((item, index) => ({
    ...item,
    index: start + index,
    top: (start + index) * itemHeight
  }))
})

function onScroll(event: Event) {
  scrollTop.value = (event.target as HTMLElement).scrollTop
}
</script>

<template>
  <div
    ref="containerRef"
    style="height: 500px; overflow-y: auto"
    @scroll="onScroll"
  >
    <!-- 占位符：让容器有足够的滚动高度 -->
    <div :style="{ height: `${allItems.length * itemHeight}px`, position: 'relative' }">
      <div
        v-for="item in visibleItems"
        :key="item.id"
        :style="{ position: 'absolute', top: `${item.top}px`, height: `${itemHeight}px` }"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

9. 实战案例：从 Vue 2 到 Vue 3.5 的平滑升级

9.1 升级准备工作

步骤 1：检查兼容性

# 安装 Vue 3.5
npm install vue@^3.5.0 vue-router@^4.5.0 pinia@^2.3.0

# 检查破坏式变更
npx @vue/compat-migration-guide

步骤 2：逐步迁移策略

阶段 1：升级依赖（Vue 3.5 + Vite 5+）
阶段 2：启用兼容模式（@vue/compat）
阶段 3：逐步替换 Options API → Composition API
阶段 4：启用 Vapor Mode（新组件优先）
阶段 5：移除兼容层

9.2 代码迁移示例

Options API → Composition API：

// ❌ Vue 2 写法（Options API）
export default {
  props: {
    userId: Number
  },
  data() {
    return {
      user: null,
      posts: []
    }
  },
  computed: {
    fullName() {
      return `${this.user?.firstName} ${this.user?.lastName}`
    }
  },
  methods: {
    async fetchUser() {
      this.user = await fetch(`/api/users/${this.userId}`).then(r => r.json())
    }
  },
  mounted() {
    this.fetchUser()
  }
}

<!-- ✅ Vue 3.5 写法（Composition API + `<script setup>`） -->
<script setup>
import { ref, computed, onMounted } from 'vue'

const props = defineProps<{ userId: number }>()
const user = ref(null)
const posts = ref([])

const fullName = computed(() => 
  `${user.value?.firstName} ${user.value?.lastName}`
)

async function fetchUser() {
  user.value = await fetch(`/api/users/${props.userId}`).then(r => r.json())
}

onMounted(() => {
  fetchUser()
})
</script>

<template>
  <div>
    <h1>{{ fullName }}</h1>
  </div>
</template>

9.3 性能对比：迁移前后

10. 总结与展望：前端框架的下一个十年

10.1 Vue 3.5 的核心价值

通过本文的深度剖析，我们可以总结出 Vue 3.5 在 2026 年前端领域的核心价值：

1. 性能革命：响应式系统重构（内存 -56%）、Vapor Mode（跳过 Virtual DOM），让 Vue 成为性能最好的主流框架之一。
2. 开发体验：Reactive Props 解构、<script setup> 语法增强，让代码更简洁、更易维护。
3. SSR 能力：懒水合、useId()、data-allow-mismatch，解决了服务端渲染的长期痛点。

10.2 与其他框架的对比

10.3 未来展望

趋势 1：Signals 标准与原生响应式

Vue 3.5 的响应式系统已经与 Signals 标准提案 高度对齐。未来，我们可能会看到：

// 未来的可能语法（基于 Signals 标准）
import { Signal, Effect } from '@vue/reactivity'

const count = new Signal.State(0)
const doubled = new Signal.Computed(() => count.get() * 2)

Effect.create(() => {
  console.log(`count is ${count.get()}`)
})

count.set(1)  // 自动触发 Effect

趋势 2：Vapor Mode 成为默认

随着 Vapor Mode 的成熟，未来可能成为 Vue 的默认编译模式：

<!-- 未来的可能语法 -->
<script setup>
// 这个组件自动启用 Vapor Mode
const count = ref(0)
</script>

<template>
  <!-- 编译时优化：无 Virtual DOM -->
  <button @click="count++">{{ count }}</button>
</template>

趋势 3：AI 辅助的编译优化

Vue 编译器可能会集成 AI 模型，根据运行时数据自动优化编译策略：

<script setup>
// AI 分析：这个组件的 `items` 很少变化，建议用 `shallowRef`
const items = ref([])  // ← AI 提示：建议使用 shallowRef
</script>

10.4 升级检查清单

在升级到 Vue 3.5 之前，请确保：

• 已移除所有 Object.defineProperty 相关的 Hack
• 已迁移到 createApp() API（Vue 3 标准）
• 已替换 filters（Vue 3 已移除）
• 已测试 IE 11 兼容性需求（Vue 3 不支持 IE 11）
• 已升级 Vue Router 到 4.x、Pinia 到 2.x
• 已在开发环境启用 @vue/compat 并进行充分测试

附录

A. 安装与快速开始

# 创建 Vue 3.5 项目（使用 Vite）
npm create vue@latest

# 手动升级现有项目
npm install vue@^3.5.0 vue-router@^4.5.0 pinia@^2.3.0

# 验证版本
npm list vue

B. 常用代码模板

模板 1：Vue 3.5 + TypeScript 组件

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// Props（支持解构 + 默认值）
const { title = '默认标题', count = 0 } = defineProps<{
  title?: string
  count?: number
}>()

// Emits
const emit = defineEmits<{
  'update:count': [value: number]
}>()

// 响应式状态
const localCount = ref(count)

// 计算属性
const doubleCount = computed(() => localCount.value * 2)

// 生命周期
onMounted(() => {
  console.log('组件已挂载')
})

// 方法
function increment() {
  localCount.value++
  emit('update:count', localCount.value)
}
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>计数：{{ localCount }}</p>
    <p>双倍：{{ doubleCount }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<style scoped>
/* 支持 CSS Modules、Tailwind、Sass 等 */
</style>

C. 参考资源

• 官方博客：https://blog.vuejs.org/
• Vue 3.5 Changelog：https://github.com/vuejs/core/blob/main/CHANGELOG.md
• Vapor Mode 文档：https://vuejs.org/guide/extras/vapor-mode.html
• 迁移指南：https://v3-migration.vuejs.org/

文章字数统计：约 18,000 字

作者简介：程序员茄子，全栈工程师，专注于前端框架、性能优化和 AI 应用。

版权声明：本文基于 Vue 3.5 官方文档和实际项目经验撰写，转载请注明出处。

「Vue 3.5 的精髓，不是新增了多少 API，而是对性能极限的不断追求。当你真正理解了编译时优化、响应式系统重构和 Vapor Mode 的设计哲学，你会发现：前端框架的下一个十年，属于那些敢于在底层重构上投入巨大精力的团队。」