Dealing with reactive arrays

[ThaNarie]

Reactivity in Vue has two concepts:

1. reactive data
2. reacting to changes

Depending on how we store arrays in our reactive data, we might need to update how we react to these changes.

reactive data

This is where we store and modify the data, and is split up in two tools:

1. ref – as a container around primitives
2. reactive - as a Proxy around objects

There is also computed, which is a combination of the "reaction to changes" and "reactive data" itself. But don't play a big role in this issue.

reacting to changes

This can generally be done in two ways:

1. watchEffect simple tool, it's executing the callback once, and if anything changes, it does it again. No options to specify.
2. watch is more powerful. It can do the same as watchEffect, but also a lot more.

Note; currently most of Muban's internal code relies on watchEffect.

Issue - Objects vs Arrays

Since arrays are sort of objects, you expect them to work the same within a reactive proxy. Whenever you set an object key, it's detected as a change.

However, with arrays you can also use methods such as push and pop to mutate the array. By default, these changes are not detected in watch or watchEffect.

watch has a { deep: true } option that can be used. It's not super clear, but if you know it, you can change it in your own component code.

But supporting this in Muban internals, would require us to change everything (where we could reasonably expect an array to be passed – or used in a computed in the middle?) to watch + deep.

Alternative

Instead of reactive arrays, we could also advocate to using a ref, and never mutate the array, but always re-assign ref.value.

// requires `watch(....., { deep: true })`
const todos = reactive([]);
todos.push(newItem);

// works everywhere
const todos = ref([]);
todos.value = todos.value.concat(newItem);

Caveat; I don't have any current experience with nested objects in arrays, and how to best deal with those. Although Vue does support nesting ref and reactive, so that might be fine.