Vue 3 introduced the Composition API, offering developers more flexible and powerful tools for managing reactivity in their applications.
Among t...
For further actions, you may consider blocking this person and/or reporting abuse
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"?