From Vue docs: we recommend using ref() as the primary API for declaring reactive state
There is literally no reason to ever use reactive anywhere. All my apps work fine with just refs. The only benefit I can see is you dont have to write .value in script sections. But on the other hand it has a number of confusing pitfalls.
But that may be a matter of personal preference. But one more important remark - the ref() is also deeply reactive by default - check HERE. Your comparsion table is wrong. If you want shallow reactivity, you have shallowRef and shallowReactive
For me, this is the most confusing thing about Vue for newcommers - Why would you have two nearly same things (from the user's perspective) for one purpose? How to choose the "right" one for my use case? So many questions...
I believe the best we can do is to let reactive slowly die out.
Hi there! I'm a Front-End Developer with a passion for crafting clean, user-friendly interfaces and building dynamic web applications using Vue.js. Always eager to learn and explore the latest in fron
Just a quick note about the last example—I think there's a small mistake. You don't need to use .value with state.loading, since reactive automatically unwraps ref properties. That means you can access and modify the ref directly without appending .value.
From Vue docs:
we recommend using ref() as the primary API for declaring reactive stateThere is literally no reason to ever use
reactiveanywhere. All my apps work fine with justrefs. The only benefit I can see is you dont have to write.valuein script sections. But on the other hand it has a number of confusing pitfalls.But that may be a matter of personal preference. But one more important remark - the
ref()is also deeply reactive by default - check HERE. Your comparsion table is wrong. If you want shallow reactivity, you haveshallowRefandshallowReactiveHey there,
I don't use reactive that often too. For all my use cases, ref was definitely enough.
REgarding the table, yes you are correct. I have fixed it in my example but forgot to fix in the table. Thanks for noticing that!
For me, this is the most confusing thing about Vue for newcommers - Why would you have two nearly same things (from the user's perspective) for one purpose? How to choose the "right" one for my use case? So many questions...
I believe the best we can do is to let
reactiveslowly die out.You need to look into the source code to understand it truly.
ref is using reactive behind the hood for all values that are not primitive (shallow).
you could argue why reactive is public but behind the hood vue needs it
see
github.com/vuejs/core/blob/main/pa...
Just a quick note about the last example—I think there's a small mistake. You don't need to use
.valuewithstate.loading, since reactive automatically unwraps ref properties. That means you can access and modify the ref directly without appending .value.Vue.js Doc: Additional Ref Unwrapping Details
state.loading = true;Amazing article with helpful insights on Vue 3 reactivity tools! Which aspects of these tools do you find most impactful for simplifying code?
I use ref and shallowRef mainly :)
reactive({items: [],
loading: ref(false)
});
Why using a ref inside a reactive obj (since there is already deep reactivity)?
Is'n
state.loading = trueenough ?Are refs WeakMaps? Do you need to cleanup listeners in something like unMount or vue3 does this for you?
AFAIK, you don't need to clean up anything. Vue does many things automagically for us :)
Like in your code line "state.count++; // Updates the UI"
My question is: Where is the "UI"?