Vue Vaporvue vapor是没有虚拟 DOM 的 vue 变体，基于 @vue/reactivity 响应式系

本文整理自 三咲智子 老师在VueConf 2024上的分享 Vue Vapor：重新发明，项目地址：vuejs/core-vapor。

一、什么是 Vue Vapor

vue vapor 是没有虚拟 DOM 的 vue 变体，基于 @vue/reactivity 响应式系统，通过追踪数据变化直接操作 DOM 更新，性能更好、包体积更小。是 vue 一个新的开始。

二、Vue Vapor 原理

引用智子老师提供的点击按钮数字增加的 demo，点击按钮时，基于 @vue/reactivity 响应式原理，对 DOM 元素进行直接操作更新，不再像传统 vue 那样首先根据状态更新虚拟 DOM，进而基于虚拟 DOM 对 diff 部分重新渲染。

import { effect, ref } from '@vue/reactivity'

// 初始化
const container = document.createElement('div')
const label = document.createElement('h1')
const button = document.createElement('button')
button.textContent = 'Increase'

button.addEventListener('click', increase) // 注册事件
const count = ref(0)
effect(() => {
  label.textContent = `Count: ${count.value}`
})
function increase() {
  count.value++
}

document.body.append(container)
container.append(label, button)

另外，补充一个尤大提供的 demo，方便理解。

三、Vue Vapor 使用与编译

使用时，仅需在 setup script 标签添加 vapor 标识即可被识别为 vapor 脚本并进行编译，vue vapor SFC 编译原理如下：

编译前

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

const count = ref(0)

function increase() {
  count.value++
}
</script>

<template>
  <h1>Count: {{ count }}</h1>
  <button @click="increase">Increase</button>
</template>

编译后

import { delegate, delegateEvents, renderEffect, setText, template } from 'vue/vapor'
import { ref } from 'vue'

const t0 = template('<h1>')
const t1 = template('<button>Increase')
delegateEvents('click')

export default {
  setup() {
    const count = ref(0)
    function increase() {
      count.value++
    }

    const n0 = t0()
    const n1 = t1()
    delegate(n1, 'click', () => increase)
    renderEffect(() => setText(n0, 'Count: ', count.value))
    return [n0, n1]
  },
}

四、Vue Vapor 包体积与性能

• 包体积相比虚拟 DOM 模式减少 33.6% （持续优化中）
• 与主流框架性能对比数据如下（持续优化中，完整数据）：

五、Vue Vapor JSX 模式

vue vapor 支持 JSX 模式，JSX 模式编译架构与 SFC 模式对比图如下：

六、Vue Vapor 定位

• vue vapor 是 vue vDOM 模式的子集：
  • 仅支持 Composition API，后续Options API 或许会作为第三方库
  • 仅构建工具编译 (Vite / Webpack…)
  • 仅支持 <script setup>
• vapor 组件支持 vDOM 模式，vDOM 将支持 vapor 模式，支持纯 vapor 模式。因此，不存在破坏性变动，在已有 vue 项目中可以无痛引入 vue vapor，可以在对性能要求较高的组件中首先使用
• 不支持 vue2

七、Vue Vapor 规划

• 将提出 RFC 征求意见稿，并在 Vue Macros 第三方项目中率先实验，以 Feature Flag 的形式引入 Vue Vapor
• 将持续优化性能和包体积
• 将在今年底发布 beta 版本，并支持 VitePress
• TODO: SSR/水合支持、DevTools兼容优化、异步组件支持、内部组件支持