Vapor mode 抢先体验， Vue 细粒度更新时代快来了！

前言

最近看推特看到 vue 核心成员已经实现了 Vapor mode 版本，尤雨溪转发了该推特！

正文

记得 23 年的时候，我写了一篇文章：《🎉尤雨溪为什么要推出Vapor Mode🎉 》

这篇文章在社区广受好评，主要介绍了当前各主流框架渲染的特点和差异！

🎉尤雨溪为什么要推出Vapor Mode🎉

🎉尤雨溪为什么要推出Vapor Mode🎉

而如今，总算可以体验到了！

为了更直观的展示，我在官方的演示 Demo 也加上了随机的背景色！

import { ref } from 'vue'
export default () => {
  let count = $ref()
  return (
    <div style={{ background: `#${(~~(Math.random() * ( << ))).toString()}` }}>
      <button onClick={() => count++}>+</button>
      <button onClick={() => count--}>-</button>
      <div>{count}</div>
    </div>
  )
}

现在当我们点击交互按钮，改变 count 时，背景色不在发生变化，说明真正做到了 dom 级别的更新！

vapor mode 只更新发生改变的dom

vapor mode 只更新发生改变的dom

官方 demo 地址：https://repl.zmjs.dev/zhiyuanzmj/jsx-directive

❝当前仅支持 jsx 版本！

下面是普通版本，交互时的表现情况：

2023-05-26 18.09.46.gif

普通更新整个组件重新渲染

我们可以看到，即使我们只改变了 count 的值，但是整个组件都重新渲染了！

这就是我们需要 vapor mode 的意义！

当然，说到 vapor mode 肯定会和之前的文章评论区一样，各种 "抄袭没有创新" ，我觉得不管是 solidjs 也好，svelte 也好，一个好的创新思路，都是值得借鉴的，这也是继 solidjs 刮起了 signal 的风之后，angularsveltevue 跟进的原因！

最后

期待 vapor mode 可以在模板文件可以使用的那天，真正开启属于vue 的细粒度更新时代!

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！