preamble
At the recent Vue Fes conference, the author of Vue Vapor, Tomoko Daiko, announced that Vue Vapor will be ready for an alpha release by the end of the year, if it can be funded.
Follow the public number: [Front-end Ouyang], give yourself a chance to advance vue
Tomoko needs to make money to support herself too
According to YU, Tomoko has been working full time on Vue Vapor for the past year with sponsorship. Now Tomoko is no longer working full time although she still has sponsorship.
That means now Tomoko needs to find a way to make money too.support oneselfup, so last week Tomoko posted a search for sponsors.
Tomoko's goal is simple, too.Just enough to feed him.. And it says that for the benefit of the sponsors, it will eventually be open source even though it is closed for development at first.
If we don't seek sponsorship, Tomoko will have to get a job in order to be able to support herself. If that happens Vapor's development will probably be slowed down, so for now the sponsorship program is the best way to go.
Currently Tomoko has received sponsorships totaling less than $1,000 (including YU's).
Even if you are as strong as JiZi, it's hard to support yourself even if you are doing open source. Ouyang can only make a small contribution (because I have recently been told to leave at the end of December, our team will be left with only leaders).
Vue Vapor now
Vue Vapor now has three main features: no virtual DOM, high performance, and smaller package size.
No Virtual DOM: It means simply that the virtual DOM has been killed off in Vue Vapor.
high performance: Because the bottleneck is broken by taking out the virtual DOM, performance is relatively much better.
Smaller package size: 53.3% reduction in package volume size.
And Vue Vapor is a subset of the version of Vue that everyone is currently using
It's a little less functional than current Vue, supporting the Composition API as well as the<script setup>。
Because Vapor is a subset of the current version of Vue, the Vapor mode without virtual DOM and the vDom mode with virtual DOM are compatible with each other.
Components that use the vDom pattern are supported in Vapor components. Components that use the Vapor mode are also supported in vDom components. And there is also support for using only the Vapor mode.
And the Vue ecosystem'sVueUse、Vue Router、Pinia、Nuxt、component libraryetc. will support Vapor.
There is also support for jsx, but it requires the introduction of theunplugin-vue-jsx-vapor。
Vapor's Mechanism
Let's start with a common example of manipulating the DOM:
// Initialize
const container = ('div')
const label = ('h1')
const button = ('button')
= 'Increase'
('click', increase)
let count = 0
const render = () => {
= `Count: ${count}`
}
function increase() {
count++
render() // Re-render
}
render() // Initial render
(container)
(label, button)
There are two main elements in this example:h1labels andbuttonButton.
h1tags are rendered in thecountThe value of the variable.
strike (on the keyboard)buttonThe button triggers the click event to executeincreasefunction, in which the function first executes thecount++Then go ahead and execute therenderfunction.
existrenderfunction that sets theh1The value in the tag is updated to the latest value.
The above scheme has a drawback in that each time the click event callback is executed, in addition to the regular execution of thecount++Outside of that, go ahead and manually call therenderfunction.
Imagine if our business code was written this way, there would be calls all over the code to therenderfunction now, such code gives you a headache just thinking about it.
Luckily Vue has an excellent responsive mechanism in its design and also extracts the responsive functionality into a separate package:@vue/reactivity。
And Vue Vapor is based on@vue/reactivityThis is to realize that the DOM will be updated automatically when the responsive data is changed, without the need to manually execute the render function.
utilization@vue/reactivityThe modified code is as follows:
import { effect, ref } from '@vue/reactivity'
// Initialize
const container = ('div')
const label = ('h1')
const button = ('button')
= 'Increase'
('click', increase)
const count = ref(0)
effect(() => {
= `Count: ${}`
})
function increase() {
++
}
(container)
(label, button)
There are three main differences between the modified code and the original code:
-
Previously it was a direct use of the
let count = 0defined variables, and the transformation usesconst count = ref(0)Defined responsive variables. -
prior
increasefunction in addition to executing thecount++In addition, you need to go and manually call therender()function. Instead, in the new code only the++。 -
The render function has been removed and replaced by the
effectfunction. In theeffectThe same DOM manipulation update is performed in the callback function of theh1value in the tag.effectfunctions andwatchEffectIt's very similar in that the callback function is re-executed when the responsive variable in the callback changes. Here is what happens when the responsive variablecountThe callback function is re-executed after the change, and the DOM operation is updated in the callback functionh1value in the tag.
That's what Vapor is based on.@vue/reactivityThe responsive principle is implemented with no virtual DOM intervention at all in the process. When a responsive variable changes the correspondingeffectcallback function, just go directly to update the DOM in the callback function.
Some of you who see this will have questions about thiseffectDo we need to hand-write the function and the code that manipulates the DOM inside?
There is certainly no need to write it manually! At compile time Vapor automatically generates aeffectcallback function, and the code inside the callback function that updates the DOM.
This is the example above in theVue Vapor SFC PlaygroundThe above compiled js code is shown below:
As you can see from the above figure, Vapor mode will automatically generate an effect callback function after compilation, and in the callback function will go to directly manipulate the DOM.
As for the compile time is how to generate effect callback function, need to wait for Vapor stabilization Ouyang will continue to write articles to explain.
summarize
No Virtual DOMThe Vapor mode isWith virtual DOMA subset of the vDom pattern, and they support component component mixing. Ditching the virtual DOM, Vapor is lightly loaded with performance as well as package size improvements over the traditional vDom pattern.The last thing is that Tomoko is now looking for sponsors to enable him to develop Vue Vapor full time while being able to support himself.
Follow the public number: [Front-end Ouyang], give yourself a chance to advance vue
Also Ouyang wrote an open source ebookvue3 Compilation Principles Revealed, reading this book can give you a qualitative improvement in your knowledge of vue compilation. This book is accessible to beginner and intermediate front-ends and is completely free, just asking for a STAR.