What are the most important differences to note between ref and reactive in vuejs?

user_7718134 0
Viewed 72

I learned vuejs recently and I seem to be having problems in fully grasping the essential differences between the usage of ref and reactive. When is it right to use ref or reactive?

vuejs3 vue-composition-api vue.js typescript javascript
1 Answers

Based on this article from Anthony Fu (a Vue.js champion) we can summarize it in these points:

  • refs are considered as primitives values
  • reactives as objects
  • refs only mutated by .value property, but reactive with any nested property
  • reactives looks like plain objects
  • reactive objects have some caveats like loosing reactivity when they are destructed.
  • reactive objects should be wrapped with function when they're watched like watch(()=>reactiveObj,(newVal,oldVal)...., unlike refs which are unwrapped watch(refProp,(newVal,oldVal)....

Conclusion :

I’d say go with ref whenever you can

user_81728570
Related