Discussion on: Thought on Vue 3 Composition API - `reactive()` considered harmful

View post

I've started using ref for the same reasons.

Ref is easier & cleaner.

I do wish we could do without .value, but every time I use reactive it comes back to bite me, so I'd much rather explicitly write .value than have to figure out the implicit.

Debove Christopher • Nov 9 '19

Yeah I did have the same problem when I wanted to use a computed on a reactive array

// This computed won't update
const todos = reactive([])
const uncompletedCount = computed(() => todos.filter(t => !t.completed).length)

// Updates correctly the computed
const todos = ref([])
const uncompletedCount = computed(() => todos.value.filter(t => !t.completed).length)

Mateusz Kwiatkowski • Mar 20 '20 • Edited

Does anyone knows how to make this example work? It seems that computed with reactive data doesn't updated at any but why is so? (Strange enough I can see in Vue DevTools, that sometimes the value for this reactive computed get somehow updated, but as soons as I open DevTools it won't anymore).

It will only work if inside reactive we define an object because, as I understand it, reactive expectes some properties to work with,. Therefore there must be an object passed. I think Vue should handle this case much better and output some sort of an error or a warning to the console.

For example the code below will update the value as intended:

const todos = reactive({
  state: []
});
const uncompletedCount = computed(
  () => todosReactive.state.filter(t => !t.completed).length
);

Darryl Noakes • Sep 13 '21

An array is an Object.