const over let/var in Vue componentsUse const for all references by default within Vue components (e.g., imports, non-reassigned variables, refs obtained via ref()). Use let only when reassignment of the variable itself is necessary (rare for state). Avoid var entirely.
Promotes immutability and predictability, reducing unexpected state changes in components. const signals that the variable binding won't be reassigned (though the value it holds, like an object or ref's .value, might still be mutable). let clearly indicates intentional reassignment. Avoids var's confusing function scoping and hoisting issues.
Side-by-side examples engineers can pattern-match during review.
export default {
data() {
var message = 'Hello'; // Bad: using var
return { message };
},
methods: {
update() {
var counter = 0; // Bad: using var
counter++;
}
}
}import { ref, computed } from 'vue';
const componentName = 'MyComponent'; // Good: const for constant
export default {
name: componentName,
props: {
initialCount: { type: Number, default: 0 }
},
setup(props) {
const count = ref(props.initialCount); // Good: const for the ref itself
let loopCounter; // Good: let if reassignment needed (e.g., in loop)
const doubleCount = computed(() => count.value * 2); // Good: const for computed
const increment = () => {
count.value++; // Modifying ref's value, not the const binding
};
for (loopCounter = 0; loopCounter < 5; loopCounter++) { /*... */ }
return { count, doubleCount, increment };
}
}From the same buckets as this rule.
For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped. This can be achieved through CSS modules, class-based strategies like BEM, or the `scoped` attribute in Single-File Components.