前言
最近看推特看到 vue 核心成员已经实现了 Vapor mode 版本，尤雨溪转发了该推特！
往期精彩推荐
- 🚀🚀🚀 Prettier 3.6.0 正式发布，支持 OXC⚓️、Hermes ！更快的体验⚡️
- 🚀🚀🚀Prisma ORM 6.10.0 重大更新，VSCode 集成，远程 MCP ，更加智能了！
- 🚀🚀🚀恭喜 Rolldown 获得 JS 开源奖年度突破奖，2025 年 JS 开源奖典礼回顾！🎉🎉🎉
- 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军
正文
记得 23 年的时候，我写了一篇文章：
《🎉尤雨溪为什么要推出Vapor Mode🎉
》
这篇文章在社区广受好评，主要介绍了当前各主流框架渲染的特点和差异！
而如今，总算可以体验到了！
为了更直观的展示，我在官方的演示 Demo 也加上了随机的背景色！
import { ref } from 'vue'
export default () => {
let count = $ref(1)
return (
<div style={{ background: `#${(~~(Math.random() * (1 << 24))).toString(16)}` }}>
<button onClick={() => count++}>+</button>
<button onClick={() => count--}>-</button>
<div>{count}</div>
</div>
)
}
现在当我们点击交互按钮，改变 count 时，背景色不在发生变化，说明真正做到了 dom 级别的更新！
官方 demo 地址：repl.zmjs.dev/zhiyuanzmj/…
当前仅支持 jsx 版本！
下面是普通版本，交互时的表现情况：
我们可以看到，即使我们只改变了 count 的值，但是整个组件都重新渲染了！
这就是我们需要 vapor mode 的意义！
当然，说到 vapor mode 肯定会和之前的文章评论区一样，各种 "抄袭没有创新" ，我觉得不管是 solidjs 也好，svelte 也好，一个好的创新思路，都是值得借鉴的，这也是继 solidjs 刮起了 signal 的风之后，angular svelte vue 跟进的原因！
期待 vapor mode 可以在模板文件可以使用的那天，真正开启属于vue 的细粒度更新时代!
最后
今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！
