Subscribe on changes!

Document how classes can avoid being reactive

avatar
Nov 13th 2020

What problem does this feature solve?

Apologies if this is well documented somewhere, I did not find it.

It is common to use some "primitive" objects that actually represent simple value. Built-in the browser we have Promise, Date, RegExp and friends. In libraries I could cite Moment or Luxon (DateTime, Interval) that serve similar purposes.

Those objects shouldn't be wrapped by reactive Vue proxy.

Browser built-ins are already taken care of by Vue itself, but JS libraries can easily be wrapped when unsuspecting. There's a need for an official way to prevent some class of objects from being reactive.

What does the proposed API look like?

In Vue 3.0.2, I see two ways to achieve this.

Either add __v_skip: true on the prototype of those objects. This would require documenting __v_skip as an official public API with long-term stability and support.

Or trick Vue into thinking they are unknown object types by modifying their type tag, i.e. add Symbol.toStringTag on their prototype and make it anything but the string "Object".

Option 3: add a new way to achieve this.

I personally use the second option and I think it's good enough, but it would need to be documented officially.

avatar
Nov 14th 2020

Please open this on the docs-next repository