Search code examples
vue.jsvuejs3coding-stylevue-composition-api

Should i use let or const in vue 3 ref variables?



I am creating a new Vue 3 project and i saw many people online declaring refs like this.
const myVariable = ref(false)

Why are we using const all of a sudden in Vue 3?
I get that refs wrap them in some way to make them editable but i still don't get why not declaring them like this:
let myVariable = ref(false)

I know it may sound a foolish question for Vue 3 devs but i cannot understand the reason behind changing values to constants.

During the meanwhile i am using the const declaration in composition API but i'd like to acknowledgwe the reason behind


Solution

  • it's preferences but the argument why const is used is when the value is not changing e.g:

    const name = 'John';
    
    // Shouldn't work.
    name = 'Bill';
    

    With ref(), you don't replace the variable but the property

    const name = ref('John');
    
    name.current = 'Bill';
    

    Here's how eslint explains it:

    If a variable is never reassigned, using the const declaration is better.

    const declaration tells readers, “this variable is never reassigned,” reducing cognitive load and improving maintainability.

    Docs (at the time of writing): https://eslint.org/docs/latest/rules/prefer-const