Vue3 Composition API > Example > refs vs reactive

reactiveVsRefs.js

// Taken from https://medium.com/swlh/vue3-using-ref-or-reactive-88d47c8f6944

// ##001 : import from vue3:
// - reactive for making properties reactive;
// - computed for computed function like total
// - toRefs for destructuring object for template
import { reactive, computed, toRefs } from "vue";
export default {
  name: 'RollTheDiceReactive',
  // ##002 : implement setup function
  setup() {
    // ##003 : declare and initialize reactive object
    const game = reactive(
        {
            dice: 0,
            rolls: [],
            // ##004 : we include also computed properties in game object
            total: computed(
              () => {
                let temptotal = 0;
                for (let i=0 ; i< game.rolls.length; i++) {
                  temptotal = temptotal + game.rolls[i]
                }
                return temptotal;
              }
            )
        }
    )
    // ##005: implement roll function (inside setup() )
    function roll() {
      game.dice = Math.floor(Math.random() * Math.floor(5)) + 1;
      game.rolls.unshift(game.dice);
    }
// ##06: implement restart function (inside setup() )
    function restart() {
      game.dice=0
      game.rolls = [];
    }
// ##007: expose to the template all stuff (object, functions etc)
    return {
      ...toRefs(game), //data
      roll, restart //functions
    };
  }
}

// References

// 001 import from vue3: reactive (for making properties reactive), computed, 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).
//     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)”.
//     If you don’t use “toRef()” and you try to use just“…object”, you will loose the reactivity of the properties.