Reactivity Transform is dead, but how about... a main reactive object?

[bpolaszek]

Hello there,

I recently heard that the Reactivity Transform RFC has been dropped, as it involved more ambiguity than it solved. I have an ongoing (experimental) project which used it, and even though I was glad not having to read or write .value anymore, I was not 100% satisfied either, since you never really know whether a JS variable is, or isn't, a ref (yeah I don't use TypeScript and I should, but that's not the point).

Anyway, I had to refactor my existing code to remove every use of the reactivity transform macro, in favor of something else, trying to avoid get / set / unref / .value / etc as much as possible.

The problem: .value is ugly

<script setup>
import { ref, computed, onMounted } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
onMounted(() => lastName.value = lastName.value.toUpperCase())
</script>

<template>
  <h1>Hello {{ fullName }}!</h1> <!-- Hello John DOE! -->
  <dl>
    <dt>First Name:</dt>
    <dd>{{ firstName }}</dd> <!-- John -->
    <dt>Last Name:</dt>
    <dd>{{ lastName }}</dd> <!-- DOE -->
  </dl>
</template>

Of course you can use get or set from @vueuse/core to make things prettier, but the point is that you are required to know that you're working on refs, and when your ref contains an object, you have to access it like get(obj).property which feels even uglier.

The solution: reactive all the things!

You will tell me, you can actually get rid of .value by encapsulating all your refs within a reactive object:

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')
const state = reactive({
  firstName,
  lastName,
  fullName: computed(() => `${state.firstName} ${state.lastName}`), // Yay, no more .value!
})

onMounted(() => state.lastName = state.lastName.toUpperCase())
</script>

<template>
  <h1>Hello {{ state.fullName }}!</h1> <!-- Hello John DOE! -->
  <dl>
    <dt>First Name:</dt>
    <dd>{{ firstName }}</dd> <!-- John -->
    <dt>Last Name:</dt>
    <dd>{{ lastName }}</dd> <!-- DOE -->
  </dl>
</template>

Sounds good at first, as you access a property of a state or a self object (name it whatever you want), which feels more natural as firstName.value, but then:

• You have 2 sources of truth for the first name and the last name (even if they point to the same one).
• You access the full name via state.fullName which is fine in the <script> part, but definitely horrible into the <template> part.

Just one source of truth, please

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'

const state = reactive({
  firstName: ref('John'),
  lastName: ref('Doe'),
  fullName: computed(() => `${state.firstName} ${state.lastName}`),
})

onMounted(() => state.lastName = state.lastName.toUpperCase())
</script>

<template>
  <h1>Hello {{ state.fullName }}!</h1> <!-- Hello John DOE! -->
  <dl>
    <dt>First Name:</dt>
    <dd>{{ state.firstName }}</dd> <!-- John -->
    <dt>Last Name:</dt>
    <dd>{{ state.lastName }}</dd> <!-- DOE -->
  </dl>
</template>

This way you can do anything you want inside <script setup> by reading or writing state.* properties, being assured that state is reactive anyway.
The only drawback that remains: inside <template> you have to prefix everything by state. since firstName, lastName and fullName aren't top-level variables.

Final Suggestion

How about some new attribute on <script setup> which would populate the template with the properties of a given reactive object, like <script setup expand="state"> which would allow some syntax like this?

<script setup expand="state">
import { reactive, ref, computed, onMounted } from 'vue'

const state = reactive({
  firstName: ref('John'),
  lastName: ref('Doe'),
  fullName: computed(() => `${state.firstName} ${state.lastName}`),
})

onMounted(() => state.lastName = state.lastName.toUpperCase())
</script>

<template>
  <h1>Hello {{ fullName }}!</h1> <!-- Hello John DOE! -->
  <dl>
    <dt>First Name:</dt>
    <dd>{{ firstName }}</dd> <!-- John -->
    <dt>Last Name:</dt>
    <dd>{{ lastName }}</dd> <!-- DOE -->
  </dl>
</template>

This would solve the .value problem, without adding too much "magic" or cognitive load.

Other syntaxes that could look cool:

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'

const state = reactive({
  firstName: ref('John'),
  lastName: ref('Doe'),
  fullName: computed(() => `${state.firstName} ${state.lastName}`),
})

onMounted(() => state.lastName = state.lastName.toUpperCase())

return state
</script>

<template>
  <h1>Hello {{ fullName }}!</h1> <!-- Hello John DOE! -->
  <dl>
    <dt>First Name:</dt>
    <dd>{{ firstName }}</dd> <!-- John -->
    <dt>Last Name:</dt>
    <dd>{{ lastName }}</dd> <!-- DOE -->
  </dl>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'

const state = reactive({
  firstName: ref('John'),
  lastName: ref('Doe'),
  fullName: computed(() => `${state.firstName} ${state.lastName}`),
})

onMounted(() => state.lastName = state.lastName.toUpperCase())

export default state
</script>

<template>
  <h1>Hello {{ fullName }}!</h1> <!-- Hello John DOE! -->
  <dl>
    <dt>First Name:</dt>
    <dd>{{ firstName }}</dd> <!-- John -->
    <dt>Last Name:</dt>
    <dd>{{ lastName }}</dd> <!-- DOE -->
  </dl>
</template>

Thoughts?

[jods4]

Why do you put these refs inside reactive? It is a reactive object by itself, you don't need that.

If you really like this style, maybe consider using regular <script>?
I was using this idea of a single reactive object rather than a collection a ref a lot myself, before we had script setup. I found it didn't translate that well to the new sugar, as you described.

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  setup() {
    const state = reactive({ 
      title: "Hello",
    });

    state.title += " World!";

    return state;
  }
};
</script>

[bpolaszek]

Using regular <script> instead adds a lot of LOC + 2 indentations (you don't only need to import components / directives, but also register them), <script setup> removes lots of boilerplate.

I'm not talking about my own usage here, but rather how Vue could improve its DX (Composition API, then <script setup>, then reactivity transform, then...)

PS: Indeed, using refs as property assignments of a reactive object is pointless 👍 - I wasn't even sure about that 😅

[jods4]

yeah, I agree <script setup> usually has better DX and that's why I switched to it after it was introduced.

Your idea is interesting but I'm personally a little on the fence about it. export inside script setup is generally not ok so we might need a different syntax but that's a detail.

The question of conflicts, having to define precedence between let fullname and const state = { fullname } in the same scope nags me a bit more. Not sure if the benefits (slight simplification) are worth adding new rules and complexity.

[bpolaszek]

There's actually already a precedence concern with props and data, e.g. a foo prop could be overridden by a const foo = computed(). That would introduce another one indeed, but as soon as you explicitely declare expand="state" for example, you are supposed to be aware that state.fullName will take precedence over fullName when referencing fullName in the template.

[bpolaszek]

But basically, what I suggest is more or less the ability to add a return state of the setup() function, within the <script setup>, to get the best of both worlds.

[ahku]

Have you used any composables yet?