Use arrow functions (`=>`) for anonymous functions like callbacks (e.g., in lifecycle hooks, watchers, event handlers, array methods) instead of the `function` keyword, especially when needing lexical `this`.
Arrow functions inherit the `this` context from their surrounding scope (lexical `this`). This is crucial in Vue components, as it avoids the need for `_this = this` or `.bind(this)` when accessing the component instance (`this`) inside callbacks like `setTimeout`, `setInterval`, or asynchronous operations within methods/hooks.
Side-by-side examples engineers can pattern-match during review.
export default {
data() { return { count: 0 }; },
mounted() {
setTimeout(function() {
// BAD: 'this' here is not the component instance
// this.count++; // This would likely fail or refer to window
console.log('Timer finished');
}, 1000);
}
}export default {
data() { return { count: 0 }; },
mounted() {
setTimeout(() => {
// GOOD: Arrow function inherits 'this' from mounted hook
this.count++;
console.log('Timer finished, count is:', this.count);
}, 1000);
},
computed: {
// GOOD: Concise syntax for simple computed
doubleCount: vm => vm.count * 2
}
}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.