Use object and array destructuring to access properties from objects (like `props`, `this`, context in `setup`) or elements from arrays, especially when accessing multiple items.
Destructuring leads to cleaner and more concise code by reducing repetition when accessing object properties or array elements. It's particularly useful in Vue's `setup` function for extracting refs, props, and context, or within methods/computed properties accessing `this`.
Side-by-side examples engineers can pattern-match during review.
export default {
props: ['user', 'settings'],
computed: {
userName() {
return this.user.name;
},
theme() {
return this.settings.theme;
}
},
methods: {
save() {
const name = this.user.name;
const theme = this.settings.theme;
//... use name and theme
}
}
}import { toRefs } from 'vue';
export default {
props: { user: Object, settings: Object },
setup(props) {
// Good: Destructure props (use toRefs for reactivity if needed)
const { user, settings } = toRefs(props);
const { emit } = getCurrentInstance(); // Destructure context
const userName = computed(() => user.value.name);
const theme = computed(() => settings.value.theme);
const save = () => {
// Access destructured refs directly
console.log(user.value.name, settings.value.theme);
emit('save');
};
return { userName, theme, save };
},
// Alternative in Options API methods:
methods: {
display() {
const { name } = this.user; // Destructure from this
const { theme } = this.settings;
console.log(name, theme);
}
}
}const name = this.user.name;
const email = this.user.email;const { name, email } = this.user;function processCoords(coords) {
const x = coords;
const y = coords;
}function processCoords([x, y]) {
//...
}setup(props, context) {
const user = props.user;
const emit = context.emit;
}setup({ user }, { emit }) {
//...
}From the same buckets as this rule.
Check if loops use equality operators (== or !=) in termination conditions. These can lead to infinite loops if the condition is never met exactly. Instead, use relational operators like < or > for safer loop termination.