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.