# san/no-side-effects-in-computed-properties

disallow side effects in computed properties

  • ⚙️ This rule is included in all of "plugin:san/essential", "plugin:san/strongly-recommended" and "plugin:san/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 () { const firstName = this.data.get('firstName') const lastName = this.data.get('lastName') return `${this.firstName} ${this.lastName}` }, reversedArray () { return this.data.get('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.data.set('firstName', 'lorem') // <- side effect return `${this.data.get('firstName')} ${this.data.get('lastName')}` }, reversedArray () { return this.data.get('array').reverse() // <- side effect - orginal array is being mutated } } } </script>
Now loading...

# 🔧 Options

Nothing.

# 📚 Further Reading

# 🔍 Implementation

Last Updated: 10/26/2021, 7:23:11 AM