The dominant reason we are excited about the Vue 3 release is its Composition API. However, ref vs reactive in Vue 3 is a growing top concern we hope to discuss today to enhance inner performance and functionality. It is a straightforward strategy builder that removes complications and makes rewriting applications much easier.
Table of Contents
what is ref in Vue js?
Ref is usually used in a reactive capacity to create data. ref in vue js, it is incorporated in the primitive datasets, to be exact. Most of the time, pick ref () as their primary choice. However, this is not set in stone, but it is a viable starting attribute.
- $refs is used to select/target HTML elements.
- $refs is like the document.querySelector(‘.el’) in JS.
- $refs can be accessed inside or outside your VueJS instance.
- $refs are only populated after the component has been rendered.
var vm = new Vue({
el: '#app',
components: {
'example-component': {
template: '#example-template',
data: function() {
return {
count: 0,
};
},
methods: {
increaseCount: function() {
this.count++;
}
}
},
}
}); <div id="app">
<example-component ref="childref"></example-component>
<button id="external-button" @click="$refs.childref.increaseCount()">Component Button</button>
</div>
<template id="example-template">
<div class="template-container" ref="childref">
<div>counter: {{ count }}</div>
<button @click="increaseCount" class="btn-warn">Increase Count</button>
</div>
</template> As you can tell, ref () was the correct choice in declaring the data set. However, there are common ref vs reactive in Vue 3queries we can agree on:
- Why are we using a const. when the title’s value is expected to change?
- Should we replace const. with let.?
- When we code with console.log (title), the values changes to Vue 3!
Ref () assumes an inner value with reactive properties. Furthermore, the object takes on a “.value” coding with particular properties. The tag also carries an internal value, which mutates. However, the coder may use title.value because the object stays constant. Thus, the const. value.
What is Reactive in vue js
Let us continue the conversation by discussing reactive(). After learning about ref () and its well-defined value, you may wonder how to transform it into t a reactive object? If we guessed correctly, ref () takes the shape of reactive ().
let property = {
user: 'testuser',
age: 30,
role: 'admin'
}
let reactiveProps = ref(property);
console.log(reactiveProps); Unfortunately, reactive () does not work well with primitive since it is an object.
Secondly, accessing the data becomes challenging when working with a reactive () tag. The tag “data” contains the “title” property. Therefore, the data.title introduces inclusivity in ref vs reactive in Vue 3.
ref vs reactive in Vue 3
After studying the above two examples, one thing is apparent. We use ref () for primitive data sets and reactive () for objects. However, the fundamental difference is how you use the tags in JavaScript and the datasets incorporated.
The tag title was used in a String. Therefore, using ref () is appropriate. However, there is still much to be learned from it:
- It is possible to group the “page” object properties. This is because they have the same properties and determine the tag use.
- ref () and reactive () are interchangeable terms, assuming you are well-versed in accessing the data. Coders use set () as a template, so they do not lock eyes with challenges later.
Assuming you want to use the plan mentioned above, you will extend the return object and the (x, y) coordinates to the template. However, the project hits a major roadblock if you re-think the coordinates regarding mouse positioning coding
The Bottom Line
One can easily confuse using reactive () and ref () in the initial coding dates. Sometimes even the expert is wrong. However, the coders are expected to understand client requirements and project guidelines to choose a route. We hope the article answered your ref vs reactive in Vue 3-related queries you had.