oboard

Vapor Mode is a compilation strategy of Vue.js that does not use virtual DOM. It compiles the code into efficient JavaScript output, reducing memory usage and runtime burden, and minimizing the size of the compiled code, thereby improving the performance of Vue.js applications.
You can experience Vapor Mode through Vue Vapor SFC Playground,
and explore the template conversion method through Vue Volar Template Explorer.

How to enable Vapor Mode in your own Vite project#

Refer to the demo sxzz/vue-vapor-demo

Upgrade the versions of vue and @vitejs/plugin-vue to the vapor version
package.json

"dependencies": {
	"vue": "npm:@vue-vapor/vue@latest"
},
"devDependencies": {
    "@vitejs/plugin-vue": "npm:@vue-vapor/vite-plugin-vue@latest",
}

Change createApp to createVaporApp

import { createVaporApp } from 'vue/vapor'
import './style.css'
import App from './App.vue'

const create = createVaporApp
create(App as any).mount('#app')

Method to check if Vapor is enabled#

import { ref, getCurrentInstance } from 'vue'

const msg = ref('Hello World!')

// @ts-expect-error
const isVapor = getCurrentInstance().vapor

Explore the compiled JavaScript of Vapor Mode#

Here we write a very simple Vue file to explore the compilation result of 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__

Characteristics of the compiled code when Vapor Mode is enabled:#

1. Template Compilation: Use the _template function to define the template. This function is used internally by Vue to generate templates.
2. Render Effect: Use _renderEffect to handle the rendering of reactive data. This is an optimized rendering function used to update the DOM more efficiently in Vapor Mode.
3. Text Setting: Use _setText to set the text content of an element. This indicates that Vapor Mode uses a more direct way to update text nodes.

Characteristics of the compiled code when Vapor Mode is disabled:#

1. Template Compilation: Use the traditional createElementBlock to create elements. This is the function used in the standard Vue compilation process to generate virtual DOM nodes.
2. Text Conversion: Use _toDisplayString to convert data into displayable strings. This is the standard approach used by Vue when handling data bindings.
3. Block-level Rendering: Use _openBlock to handle block-level rendering, which is the standard approach used by Vue when dealing with multiple sibling nodes.

Comparison of the compiled code:#

• Performance Optimization: The compiled code in Vapor Mode has been optimized to reduce DOM operations at runtime and improve rendering efficiency.
• API Usage: The API used in Vapor Mode (such as _renderEffect and _setText) is different from the API used in standard mode, in order to achieve more efficient rendering logic.

Vapor Mode API#

1. renderEffect: This function is responsible for listening to changes in classes, attributes, and text to ensure correct updates to these nodes.
2. setClass: As the name suggests, this function assigns classes to element nodes. It takes two parameters: an element (or node) and the class to be assigned to the element.
3. setDynamicProp: This function is used to set dynamic properties on elements. It takes three parameters: element, key, and value. These are used to determine the appropriate value to assign or update each time this function is called.
4. setText: This function takes a node and a possible value. It sets the given value as the text content of the node, while also verifying if the content has been modified.
5. template: This function takes a valid HTML string and creates an element from it. When examining this function, we can see that it uses basic DOM manipulation methods. Specifically, it uses document.createElement to create an element and then appends the content of the element using innerHTML, which accepts an HTML string.

Summary#

In 2024, Vapor Mode of Vue revolutionized the field of front-end development, bringing unprecedented changes to the Vue ecosystem with its outstanding performance improvements. We look forward to the future performance of Vapor Mode and believe that it will bring developers a smoother and more efficient development experience.