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

Question

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?

Answer 1

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