Vue 3.6's new opt-in vapor mode compiles components into bundles that skip the virtual DOM entirely, making apps faster with less runtime overhead.

5:12virtual DOM, does not include any extra stuffs. It's just as little JavaScript as possible. Um, this idea was popularized by Spelt in SolidJS, but now we're getting that inside of Vue.js. Um, little things about uh vapor mode. So in Vue.js, JS we use SFCs or single file components and in version three they introduced this setup keyword essentially on your script you throw setup and that allows you to just define

5:40all of your state variables and functions at the top level >> and now you can add vapor on there and it's opt-in per component but it's also optin per app. So you could actually have a regular plain old view app where it works the old way with the virtual DOM. I will say an optimized virtual DOM. It's a faster virtual DOM than React. Um, but if you have, let's say,

6:00one component that needs to be really performant, let's say it's like a a data table or uh an analytics dashboard or something that that requires a lot of updates and would basically have overhead if there was the virtual DOM, you can just throw the Vapor keyword on there and instantly that one component will now use the the native compilation and be a whole lot faster. >> Um, and so it's opt-in, which is cool.

6:24And then the other aspect of this is if you're writing an app from the ground up, you can write it all with vapor. So instead of saying create app, you say create vapor app and then you essentially get a similar build pipeline as with spelt or solid. Whereas when you run v build, this is creating a really small bundle that doesn't include all of the view runtime, all the virtual DOM

6:43stuff. >> So why is this faster? Like like what's what's going on here? I understand like with spelt it doesn't have the entire uh virtual DOM to be able to diff everything. It it simply just compiles to divs or or elements that can be updated. Is that the same thing? >> Yeah, exact same idea. Essentially, uh right now if you're building a Vue app with Vue version 3, um it actually

7:11compiles into render functions. So the the the output of a a view build is very similar to React where you have these uh functions that get instantiated and then added to the DOM and then whenever an update happens like a state changes or an effect something changes inside of an effect the virtual DOM reconciliation kicks in to do the diff and then update the DOM. with vapor with vapor mode that