Vapor: The Future Of Vue

Not gonna lie, Vapor has me pretty hyped. Seems like they learned all the right lessons from Solid and other explorations of signals.

Blog post:

S/O Ph4se0n3 for the awesome edit 🙏

[EvanYou]

Hey Theo, thanks for the shoutout (and a pleasant surprise to see Vue content here).
Small corrections:
1. As many have pointed out around 3:20 - even in the current Virtual-DOM-based render mode, Vue doesn't need explicit memo to skip child component updates. This is because child components will track their own dependencies and only update if parent props have changed.
2. Near the end about Vapor SSR codegen - it is actually a playground bug that it is showing Vapor code in the SSR tab. Vapor doesn't change how Vue components are compiled for SSR, and the current SSR compilation output is performant by turning templates into string concatenations and buffer pushes as much as possible. In the browser, Vapor runtime will be able to hydrate from the same SSR output like we currently have.

[tokiorys]

"Vue RS is similar to React RS": 3:20
No, it's not similar. Vue reactivity system is based on running "chunks" of code (in watch, onMounted and another hooks), while React RS is based on running component from start to the end. You can set console.log at the beginning of Vue component (setup/Composition API), it will run only once, while React will trigger console.log every time when state is changed.

"When specific change of the state changes component, other's do not": 3:34
<button> in example will not be updated (rerendered) in Vue 3, if state from the top of tree do not included in props of the <button>
Vue does it via Compiler Flags

[ARKGAMING]

Vue was the first framework I learned and worked with. Every time it's mentioned I'm like "yayyyy! Vue!"

[Voidstroyer]

As others have already pointed out, Vue's (at least vue 3 and as far as I know vue 2 as well) reactivity is not at all similar to React's. Components are not rerendered entirely from top down depending on where the update occurs. The vue compiler makes sure that the resulting JS code only updates the DOM wherever a value is used, similar to how SolidJS works. Vapor mode just removes the need for the Virtual DOM.

[gro]

Vue's reactivity system is so far ahead of React's since years, it's absurd :D

[jwoods]

We need more VUE JOBS, everything stuck in React

[No-cres]

I love how Vapor is a play on the word solid. Solid -> liquid -> vapor. Such a neat callback to the inspiration of Vapor Mode

[stephan]

Sorry, but you are _not_ correct at 15:15 Theo. Vue already has fine grained reactivity - I can't link vids here (thx, YT), but see any Vue 3 release talks by Evan or release notes since 3.0.
What Vapor changes is the intermediate V-DOM layer on a developer choosen case by case basis. Which is great, because sometimes the V-DOM is actually really helpful, and sometimes it's not necessary. Either way a regular dev shouldn't have to worry about technical details during regular work. Now you can just flick a switch and/or let library authors deal with it!
PS: SolidJS is fast, but not much faster than Vue nor the fastest framework out there. Please refer to "frontent framework performance" by Stefan Krause. And also... All FE frameworks are usually more than fast enough nowadays, V-DOM or not.

[randall.chamberlain]

Since I learned how Solid implements true reactivity, I left React behind for my own projects, and every time I need to work with some React code I dread it a bit. I think SolidJS got it right from the get go.

[notkamui]

Vue's reactivity system is already signal based. It just doesn't have the same name. refs are signals, which are both just other names for observables.

The only thing that is similar to React is the idea of the VDOM

[jonnyso]

Every time I learn a bit more about how React works I start wondering why people still use it.

[nerdcave]

Solid, Vue, and Svelte nail the mental model: a setup function where your "init code" only runs once + observable pattern (signals). React dominates the industry by a thousand miles though, so anything they can do to catch up would be very welcome.

[dennissam]

"Vue RS is similar to React RS" vue: we are not same bro

[TayambaMwanza]

A pro Vue video, times really are changing.

[iam_spaceCabbage]

Can we talk about how gorgeous vue is for a sec

[jasonrooney]

Vue already works how you think vapor will make it work from a component writing point of view. Vapor is just an 'under the hood' thing and an optimization. From a DX perspective, nothing really changes if you're already using script setup. Vue already works just like Solid, except there is some under-the-hood VDOM diffing and it's not at a super fine grained level.

[roccociccone]

It's so interesting because when I got into this 7 years ago Vue was still seen as the new kid on the block.

[InternetKilledTV]

I've been primarily doing frontends in Vue for years now. V2 --> V3 was a big leap, especially once I got the composition API down. My goodness this has me excited all over again. It wouldn't surprise me if some amalgamation of Vue + Solid were adopted as the "standard" in a few business years, _especially_ given the flexibility demonstrated with "bring your own signals" functions.

[cooltune]

My homie talkin bout Vue == insta thumbs up. It's simply just the way.

[crunchya]

This is just pure hype man, i love where vue is going in terms of signals, very promising!