⚡️ Vue 3.5 正式发布：10× 响应式性能、SSR 水合黑科技、告别 .value！

一句话总结：Vue 3.5 是一次「性能 + 体验」的双重大升级，尤其对大数组、SSR 和自定义元素项目极不友好------因为升级后你就再也回不去 3.4 了！

---

🚄 响应式系统：大数组场景 10× 性能提升

• PR #9511 重构了依赖收集算法，遍历+更新 大数组时，CPU 耗时平均从 150 ms 降至 15 ms，内存占用也同步下降。
• 实测场景：渲染 10 000 条列表并频繁 push/splice，界面不再卡成 PPT。

// 以前：需要 ref([]) 再 .value
const list = ref([]);
list.value.push(item);

// 3.5：解构即可保持响应式
const { list } = defineProps(['list']);
list.push(item); // 直接响应！

---

🔮 响应式 Props 解构：告别 .value

• defineProps 解构出的变量自带响应式 ，无需再用 .value。
• 向下兼容：旧代码无需改动，新代码更简洁。

<script setup>
// 过去
const props = defineProps(['title']);
console.log(props.title);

// 现在
const { title } = defineProps(['title']);
console.log(title); // 依然响应式
</script>

---

🌊 SSR 水合（Hydration）全面升级

1. 延迟水合（Lazy Hydration）

• 组件默认水合时机：浏览器空闲时。
• 自定义指令 v-hydrate-on-visible 让组件进入视口才激活。

<HeavyChart v-hydrate-on-visible />

• 实测：首屏可交互时间（TTI）缩短 30 %。

2. useId() 稳定唯一 ID

• 服务端与客户端生成的 ID 完全一致，彻底消除「水合 ID 不匹配」警告。
• 支持嵌套、列表、Teleport 等复杂场景。

<script setup>
import { useId } from 'vue';
const id = useId(); // e.g. v-0-1-2-3
</script>

<template>
  <label :for="id">用户名</label>
  <input :id="id" />
</template>

---

🧩 自定义元素（Custom Elements）修复清单

• 修复 <slot> 在 Shadow DOM 内的重渲染问题。
• 修复 v-model 与 CustomEvent 的同步异常。
• 新增 defineCustomElement 选项：shadowRoot: false，支持无 Shadow DOM 的轻量组件。

---

🛠️ 升级指北

1. 修改 package.json

"vue": "^3.5.0"

2. 运行官方 codemod（一键替换 .value 写法）

npx @vue/codemod upgrade-3.5

3. 如果使用 SSR，检查 useId() 冲突并更新模板。

---

🎁 彩蛋：官方路线图透露

• 3.6 预览：Suspense 支持片段级流式渲染；
• Vapor 模式：实验性无虚拟 DOM 编译，性能再翻倍。

---

立即升级，让你的 Vue 项目快到飞起！