Vue 3.3.6 Faster Thanks To WeakMaps

Performance improvements and type checking for additional attributes of DOM nodes make new Vue worth of an update

Vue team really did a lot of work. In fact, they releases two subversions on one day. Vue 3.3.5 and 3.3.6 were both released on 20.10.2023.

WeakMaps

One of the things that got improved is a move from Maps and Sets to WeakMaps and WeakSets when possible.

So what is that and why it’s important?

If you store stuff in Maps or Sets you make a reference to this stuff. Meaning, as long as a Map or Set is used, this stuff won’t be released from the memory with the garbage collector.

Usually it makes sense. But sometimes it doesn’t. Especially when you write some kind of code that just taps into the regular workflow of the data. For example by adding diagnostics data into data that flow through the system.

You want the data to be released wheneven needed, you don’t want to reserve the right to keep the data until you need it.

That’s where WeakMaps and WeakSets come into play and Vue now uses these more internally to prevent memory leaks and improve overall performance.

Support for contenteditable="plaintext-only"

I’ve thought that contenteditable can be either true or false. But apparently, there’s third value “plaintext-only”.

Normally, when you set the param to true, you can edit formatting too, and paste rich text. With the plaintext-only value you can’t.

What changed is that now, Vue won’t throw Typescript error for the legal value defined in HTML spec.

Lazy Loading Images

Again, that’s only type support for a HTML feature. It was added in 3.3.5 and makes you able to set loading parameter of a img to lazy.

That way the image won’t be loaded immediately, but rather when your browser decides you’re near enought to see it soon.

It’s a standard HTML feature that’s already here for a while, but that fix is a good reminder to use it to improve app performance.