Use `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.