What is the difference between Ref() and Reactive() in Vue 3 Composition API?
The biggest feature of Vue 3 is the Composition API. This offers an elective way to deal with making components that is very different than the current options API.
With the Options API, we need to follow a few guidelines when defining reactive data, and the Composition API is the same. You can't simply declare data and anticipate that Vue should know that you might want it tracked for changes.
In Vue 3 Composition API,
Reactive() are the new ways of creating a reactive property.
Ref() vs Reactive()
If you need to make a reactive property of primitive data type,
ref() takes an inner value and returns a reactive and mutable
ref object. The
ref object has a single property
.value that focuses on the inner value. This implies that if you need to access or mutate the value you have to utilize
We just looked at certain examples of utilizing
ref() when you need to define reactive data on primitive values. What happens if you need to make a reactive object? For that, you could utilize
ref(). However, under the hood, it's simply calling
reactive(). So, I will stick to using
On the other side of that
reactive() won't work with primitive values.
reactive() takes an object and returns a reactive proxy of the original. This is equivalent to 2.x's
Vue.observable() and was renamed to avoid confusion with RxJS observables.
Please login or create new account to add your comment.