vue/no-side-effects-in-computed-properties
disallow side effects in computed properties
- ⚙️ This rule is included in all of
"plugin:vue/essential","plugin:vue/strongly-recommended"and"plugin:vue/recommended".
📖 Rule Details
This rule is aimed at preventing the code which makes side effects in computed properties.
It is considered a very bad practice to introduce side effects inside computed properties. It makes the code not predictable and hard to understand.
<script>
/* ✓ GOOD */
export default {
computed: {
fullName () {
return `${this.firstName} ${this.lastName}`
},
reversedArray () {
return this.array.slice(0).reverse() // .slice makes a copy of the array, instead of mutating the orginal
}
}
}
</script>
<script>
/* ✗ BAD */
export default {
computed: {
fullName () {
this.firstName = 'lorem' // <- side effect
return `${this.firstName} ${this.lastName}`
},
reversedArray () {
return this.array.reverse() // <- side effect - orginal array is being mutated
}
}
}
</script>
🔧 Options
Nothing.