Could Vue create a "VDOM-less" or Svelte-like mode?

[matthew-dean]

Recently I came across petite-vue. Unfortunately, it has no issue tracker and doesn't seem to receive regular updates, but I find it a really compelling project.

At work and amongst colleagues, we often have a lot of discussions around pros / cons of Vue vs. Svelte. Svelte's tiny runtime, incredible performance, and direct DOM updates make it really attractive. However, Vue's ecosystem is larger with more targeted third-party components. Otherwise, interestingly, Vue SFCs and Svelte components are really not that different.

I would love to see petite-vues VDOM-less mode be an option for mainstream Vue. Right now, petite-vue seems mostly designed for in-browser compilation without a build step. But because it has really compelling features that Vue doesn't have and Svelte has, such as direct lifecycle events for mounted elements, and "components" returning real DOM elements, like Svelte.

I would love to see Vue offer a "Svelte-mode" which, like Svelte, offers a tiny runtime and easy DOM access without ref callbacks, but would support the rest of the Vue ecosystem. Basically the best of Vue + the best features of petite-vue.

[matthew-dean]

Another option here, of course, is that Vue doesn't directly create this mode, but provides the APIs to create a petite-vue / Svelte mode, that could be community-managed.

[edison1105]

In Vue, it's called vapor-mode and coming in Q4.
see https://www.youtube.com/watch?v=y-hN5Q_lb9A&t=16s

[Shyam-Chen]

Vapor Mode

Vapor Mode is an alternative compilation strategy that we have been experimenting with, inspired by Solid. Given the same Vue SFC, Vapor Mode compiles it into JavaScript output that is more performant, uses less memory, and requires less runtime support code compared to the current Virtual DOM based output. It is still in early phase, but here are some high level points:

• Vapor Mode is intended for use cases where performance is the primary concern. It is opt-in and does not affect existing codebases.

• At the very least, you will be able to embed a Vapor component subtree into any existing Vue 3 app. Ideally, we hope to achieve granular opt-in at the component level, which means freely mixing Vapor and non-Vapor components in the same app.

• Building an app with only Vapor components allows you to drop the Virtual DOM runtime from the bundle, significantly reducing the baseline runtime size.

• In order to achieve the best performance, Vapor Mode will only support a subset of Vue features. In particular, Vapor Mode components will only support Composition API and <script setup>. However, this supported subset will work exactly the same between Vapor and non-Vapor components.

[leopiccionia]

direct lifecycle events for mounted elements,

Just for your information, Vue VNodes do support the @vue:mounted and @vue:unmounted hooks. The events' payload is the VNode instance (you can access the raw HTML element from there). See demo.

It's new in Vue 3. According to the migration guide, lifecycle events worked only for components in Vue 2. petite-vue docs is outdated.