example store:
const trigger = ref(true);
const prop = computed(() => {
trigger.value;
console.log('comp prop run'); // works!
return some_big_object;
});
const doChange = () => {
some_big_object[5000].text = 'abc';
trigger.value = !trigger.value;
}
return { prop, doChange }
in component if I call store.doChange, the computed function runs, but the component still displays the previous value (no updated)
if I change the return in computed function to return {... some_big_object};
then it updates everywhere!
It appears to be because Vue does some check for the value, if it has the same reference as the prev value, it will not re-render it…
Is there some other way around this? I’d like to avoid creating a copy of a large object.
2
Answers
You can watch the trigger and update the component manually:
VUE SFC PLAYGROUND
Or you can insert the trigger into the template
VUE SFC PLAYGROUND
Or you can use the trigger as a key to re-render the part where the big object is used:
VUE SFC PLAYGROUND
computed()
should calculate something, and in your case it just returns an object. In the exampledoChange
you mentioned, changessome_big_object[5000]
, so calculate this property.You can also return
some_big_object
from the store if you need it:Vue SFC Playground