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>
Now loading...
<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>
Now loading...

🔧 Options

Nothing.

📚 Further reading

🔍 Implementation

Last Updated: 12/30/2018, 3:44:02 AM