Vue3.0 Ref

Posted on  by admin

Not the answer you're looking for? Browse other questions tagged javascriptvue.jsvue-composition-api or ask your own question.

In my previous post, I implemented my first Vue3 component. I implementend a very simple web app (roll the dice) where I had a “div” where to show the result and a button to trigger the roll and generate a random number from 1 to 6.

In that case, I used “ref()” to create reactive properties. “My first Vue3 component” article where I used ref() for declaring reactive properties: https://medium.com/swlh/my-first-vue3-component-6e1ef1670544.

For example in “setup()” function of my component I declared “dice” property in order to store the last result of the roll action.

The “dice” property was an integer, initialized with 0. To make it reactive, I used “ref()” function to initialize it.

So “dice” it was not just a simple integer but an object:.

Not the answer you're looking for? Browse other questions tagged vuejs3primevue or ask your own question.

In this way “dice” is a object with “value” attribute. This means that, if you want to access to the “dice” value in your component, you need to use “dice.value”. Another way to make the properties reactive is to use “reactive()” function.

The first difference from developer perspective is that using “ref()” you need to declare each single property.

and when you send the properties to the template you need to list them individually:. With “reactive()” function you need to collect all properties in one object:. With this syntax you can pass to the template just the object (game object) instead of all properties (dice, rolls…):. Another difference is in the properties usage. You can avoid to use “.value” but you need to use it as object attribute “game.dice”. An additional thing: if you want to avoid to use “game.dice” and “game.rolls” and you want use just “dice” and “rolls”, you could use the object destructuring when you send properties to template (in the return clausole of setup method).

Thanks to the usage of destructuring object, the template is still the same of “ref()” approach. ##001 import from vue3: reactive (for making properties reactive), computed (for computed functions), toRefs (for destructuring object for template);.

##002 setup function: with composition API in Vue3 we need to implement the setup function.

Setup function will contain and will return an object (see point ##007) and functions needed by template;. ##003 declare the reactive object with properties and also computed properties.

To make it reactive we will use “reactive()” function;.

##004 we can include also “computed properties” in the reactive object. You can access to computed properties accessing to the object properties (game.total in this case);.

##005 implement the roll() function in order to change the value of dice and adding on top of the array rolls the new dice value (to keep track of all rolls);.

##006 implement the restart() function in order to re-initialize “dice” and “rolls” (we are accessing to them as object attribute);. ##007 this is a new thing for Vue2 users (because the setup() method).

unref()

We need to return an object with all stuff needed in the template. In order to access directly to attributes in the template as “dice” instead of “game.dice” you need to use destricturing functionality (…object).

To keep the destructured object reactive, you need to use “…toRef(object)”.

isref()

If you don’t use “toRef()” and you try to use just“…object”, you will loose the reactivity of the properties.

toRefs()

This is a list of useful links:. the sources: https://github.com/roberto-butti/vue3-demo-rollthedice. the component with reactive(): https://github.com/roberto-butti/vue3-demo-rollthedice/blob/master/src/components/RollTheDiceReactive.vue. the component with ref(): https://github.com/roberto-butti/vue3-demo-rollthedice/blob/master/src/components/RollTheDice.vue.

Vite web dev build tool: https://github.com/vitejs/vite.

computed()

Vue3 composition API cheat sheet: https://www.vuemastery.com/pdf/Vue-3-Cheat-Sheet.pdf. Vue composition API: https://composition-api.vuejs.org/api.html.

Vue3 essential course by Vuemastery: https://www.vuemastery.com/courses/vue-3-essentials/.

I’m exploring Vue3 so if you have some feedback, please let me know in the comments.