Subscribe on changes!

`reactive` object changes won't trigger `patchProp` if a value changes

avatar
Aug 28th 2020

What problem does this feature solve?

If a value is reactive - i.e. returned from setup as a reactive object - changes to it should still cause patchProp to fire. E.g.

<template>
  <my-node :reactive-prop="reactiveProp" />
</template>

<script>
export default {
   setup() {
       const reactiveProp = reactive({ key: "my value" })
       
       setTimeout(() => { reactiveProp.key = "changed value" }, 1000)

       return { reactiveProp }
   }
}
</script>

What does the proposed API look like?

In a custom renderer, I would expect patchProp to fire twice, but it only fires upon component construction. I understand that reactive is a proxy, but isn't it unwrapped same as a ref is?

avatar
Aug 28th 2020

Changing a property mutates teh object, but it's still the same object. hence, the valu passed to <my-node> is still the same, there's no need to re-render the component, and consequently, there will also be no diffing and patching going on.

<my-node> can watch props.reactiveProp for deep changes and update accordingly.

That behaviour was always like this in Vue 2, and is unrelated to proxies or unwrapping (And btw no, proxies are not "unwrapped", that's not a thing).

avatar
Aug 28th 2020

Clear, thank you :)