Utilize object method shorthands, property value shorthands, and computed property names when defining objects (e.g., in `data`, `computed`, `methods`). Prefer object spread syntax (`...`) over `Object.assign` for shallow copies or merging objects.
These ES6 features lead to more concise, readable, and maintainable code, especially within Vue component options which are often object-heavy. Spread syntax provides an immutable way to create new objects or arrays based on existing ones, fitting well with state update patterns.
Side-by-side examples engineers can pattern-match during review.
export default {
data: function() {
return { count: 0 };
},
methods: {
increment: function() {
this.count++;
}
},
computed: {
doubleCount: function() {
return this.count * 2;
}
}
}
// Merging objects with Object.assign
const newOptions = Object.assign({}, oldOptions, { enabled: true });const name = 'MyComponent';
export default {
name, // Property value shorthand
data() { // Method shorthand
return { count: 0 };
},
methods: {
increment() { // Method shorthand
this.count++;
}
},
computed: {
doubleCount() { // Method shorthand
return this.count * 2;
},
() { // Computed property name
return 'loaded';
}
}
}
// Merging objects with spread syntax
const newOptions = {...oldOptions, enabled: true };data: function() { return {}; }data() { return {}; }const name = 'Comp';
export default { name: name };const name = 'Comp';
export default { name };const newArr = oldArr.concat(newItem);const newArr = [...oldArr, newItem]; // Good: Array spreadFrom 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.