Subscribe on changes!

I found a small problem in using composition (API) shallowRef and customRef

avatar
Sep 12th 2022

Vue version

3.2.39

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9U83O2jAQfJWVLwQJEtRjmqD2FSqOvpiwhFDHtmwHhKK8e9c/4UOt1EgIez07O/bOzuynMeVjQlazxnV2MB4c+smAFKpvOfOOsyNXAMNotPUwu5uQUj9/4XXXTc7rMazot8DV6hE2xLUhvH8ZBH2+t3NIBlBixNp5O6g+BBauOq2chxGdEz3WxNAQ/AgtfFUoPpM5u6GkA3hqKy+ccbVsubpOqvODVjC+LFGcKF+o17F4CDlhfdr5YcT22+Fw2EYuiR5CSE++Jtz3ELN0X6vgfZui8FZ0v2FHavseLWzbYxaSoXkH0KMvEnH6YmJBstZATohq1uiyW1f00oXCJ53WcPrk6SQKe0o6i6x3G8XmOikUHgv9iiu+dGYWemEtsZS6LzadHOhOBN98yIOkjHiSjM+TfPvP2yzxOd8BauL7L/Ti3VQrLoO7taknBWdpzxlhVkiU46hwVp19UEY9ZWh4C5zBsBlBaQ+h9Tr0PFElGGUH7vN58NEOXDVV8jA5tvE4Gik8Rvc258l7csmPWJd8neuTubsbOR2bKiFC5mV4kD7hHOGEMesEAMzzKjMIXJZ9+uY5qVqiAsoOJNVH/cb5l0RwnTZ4oX0UGkJHtmNpsPajMOXdaUWDGJvI8wFVr1fDcUbTFfY0C94bV1eVu3ZhfO+u1LavaFXaSYUulejG/dnqp0NLxJxl10WOioIPtHuL6oIW7f84/4L+w5vHeWHLH7u0bvU=

Steps to reproduce

type obj={ name:string } const message:Ref = shallowRef({ name:"helllo world" }) function myref<T = any>(value:T,time=2000){ let timeout:any; return customRef((track ,trigger )=>{ return { get(){ track() return value }, set(newval: T){ clearTimeout(timeout); timeout = setTimeout(()=>{ console.log('click set') value = newval trigger() },time) } } }) } const radish= myref("radish")

const clicks = ()=>{ message.value.name= " i'm not hello" radish.value = "rabbit" } // template <button @click="clicks ">change

{{message.name}}{{radish}}

What is expected?

I want the message not to be converted to reactive I want radish to be responsive

What is actually happening?

Both radish and message become reactive

System Info

No response

Any additional comments?

No response

avatar
Sep 12th 2022

I can't follow. Changing the the value of a shallowRef is a reactive operation.

Not sure what you are expecting, your description is not very detailed. Could you provide a bit more details?

avatar
Sep 12th 2022

Oh, now i get it. You want the changed value of the nonreactive object in message not to appear in the template after it updated because of the radish triggering?

That's not how re-renders work. When a component re-renders, it updates she whole template with all the latest data.