Vapor Mode是Vue.js没有虚拟DOM的一种编译策略，将代码编译成高效的JavaScript输出，使用占用的内存，减轻运行时的负担，减小编译后的体积，从而提高Vue.js应用的性能。
可以通过Vue Vapor SFC Playground体验Vapor Mode，
通过Vue Volar Template Explorer探究模板的转换方式。
如何在自己的Vite项目中开启Vapor Mode
Demo参考 sxzz/vue-vapor-demo
将vue和@vitejs/plugin-vue的版本升级为vapor版
package.json
"dependencies": {
"vue": "npm:@vue-vapor/vue@latest"
},
"devDependencies": {
"@vitejs/plugin-vue": "npm:@vue-vapor/vite-plugin-vue@latest",
}
createApp改为createVaporApp
import { createVaporApp } from 'vue/vapor'
import './style.css'
import App from './App.vue'
const create = createVaporApp
create(App as any).mount('#app')
检测Vapor是否开启的方法
import { ref, getCurrentInstance } from 'vue'
const msg = ref('Hello World!')
// @ts-expect-error
const isVapor = getCurrentInstance().vapor
探索Vapor Mode编译后的js
这里我们编写一个极为简单的vue文件，来探索Vapor Mode的编译产物
<script setup lang="ts">
import { ref } from 'vue'
const msg = ref('Hello World!')
const classes = ref('p')
</script>
<template>
<h1 :class="classes">{{ msg }}</h1>
</template>
VAPOR ON
/* Analyzed bindings: {
"ref": "setup-const",
"msg": "setup-ref"
} */
import { defineComponent as _defineComponent } from 'vue/vapor'
import { renderEffect as _renderEffect, setText as _setText, setClass as _setClass, template as _template } from 'vue/vapor';
const t0 = _template("<h1></h1>")
import { ref } from 'vue'
const __sfc__ = _defineComponent({
vapor: true,
__name: 'App',
setup(__props) {
const msg = ref('Hello World!')
return (() => {
const n0 = t0()
_renderEffect(() => _setText(n0, msg.value))
_renderEffect(() => _setClass(n0, classes.value))
return n0
})()
}
})
__sfc__.__file = "src/App.vue"
export default __sfc__
VAPOR OFF
/* Analyzed bindings: {
"ref": "setup-const",
"msg": "setup-ref"
} */
import { defineComponent as _defineComponent } from 'vue'
import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
import { ref } from 'vue'
const __sfc__ = _defineComponent({
__name: 'App',
setup(__props) {
const msg = ref('Hello World!')
const classes = ref('p')
return (_ctx,_cache) => {
return (_openBlock(), _createElementBlock("h1", {
class: _normalizeClass(classes.value)
}, _toDisplayString(msg.value), 3 /* TEXT, CLASS */))
}
}
})
__sfc__.__file = "src/App.vue"
export default __sfc__
Vapor Mode 开启时的编译产物特点：
- 模板编译：使用
_template函数来定义模板，这个函数是Vue内部用于生成模板的函数。 - 渲染效果：使用
_renderEffect来处理响应式数据的渲染，这是一个优化版的渲染函数，用于在Vapor Mode下更高效地更新DOM。 - 文本设置：使用
_setText函数来设置元素的文本内容，这表明Vapor Mode使用了一种更直接的方式来更新文本节点。
Vapor Mode 关闭时的编译产物特点：
- 模板编译：使用传统的
createElementBlock来创建元素，这是Vue标准编译流程中用于生成虚拟DOM节点的函数。 - 文本转换：使用
_toDisplayString来将数据转换为可显示的字符串，这是Vue在处理数据绑定时的标准做法。 - 块级渲染：使用
_openBlock来处理块级渲染，这是Vue在处理多个同级节点时的标准做法。
编译产物的对比：
- 性能优化：Vapor Mode的编译产物进行了更多的优化，以减少运行时的DOM操作和提高渲染效率。
- API使用：Vapor Mode下使用的API（如
_renderEffect和_setText）与标准模式下的API有所不同，为了实现更高效的渲染逻辑。
Vapor Mode API
- renderEffect：此函数负责监听类、属性和文本的更改，以确保在更新时对这些节点进行正确的更改。
- setClass：顾名思义，此函数将类分配给节点元素。它接受两个参数：一个element（或node）和它分配给元素的class。
- setDynamicProp：此函数用于设置元素上的动态属性。它需要三个参数：element、key和value。这些用于确定每次调用此函数时分配或更新的适当值。
- setText：此函数接受一个node和可能的值。它将给定的值设置为节点的textContent，同时还验证内容是否已被修改。
- template：此函数接受一个有效的HTML字符串并从中创建一个元素。检查该函数时，我们可以看到它使用基本的DOM操作方法。具体来说，使用document.createElement创建元素。然后使用innerHTML追加元素的内容，innerHTML接受HTML字符串。
总结
2024年，Vue的Vapor Mode革新了前端开发领域，以其卓越的性能提升，为Vue生态系统带来了前所未有的变革。我们满怀期待地展望Vapor Mode在未来的表现，相信它将为开发者带来更加流畅和高效的开发体验。
