Subscribe on changes!

shallowRef on array is not shallow

avatar
May 1st 2022

Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

// Change the item price
// Re-computation will not happen due to shallow-ref
order.value[1].price = 550;
expect(total.value).not.toEqual(1450); // GONE WRONG. TODO: fix the issue

// Force trigger to re-compute
triggerRef(order);
expect(total.value).toEqual(1550);

What is expected?

Re-computation will not happen due to shallow-ref

What is actually happening?

Re-computation happens

avatar
May 2nd 2022

This is expected. This is because computed is calculated when the first value is taken. You modified the order value before the total was accessed, which was before the computed value was calculated. see demo

you should use onMounted

onMounted(()=>{
    order.value[1].price = 550;
})