Skip to content

vue/no-side-effects-in-computed-properties

disallow side effects in computed properties

  • ⚙️ This rule is included in all of "plugin:vue/essential", *.configs["flat/essential"], "plugin:vue/vue2-essential", *.configs["flat/vue2-essential"], "plugin:vue/strongly-recommended", *.configs["flat/strongly-recommended"], "plugin:vue/vue2-strongly-recommended", *.configs["flat/vue2-strongly-recommended"], "plugin:vue/recommended", *.configs["flat/recommended"], "plugin:vue/vue2-recommended" and *.configs["flat/vue2-recommended"].

📖 Rule Details

This rule is aimed at preventing the code which makes side effects in computed properties and functions.

It is considered a very bad practice to introduce side effects inside computed properties and functions. 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...
<script> import { computed } from 'vue' /* ✓ GOOD */ export default { setup() { const foo = useFoo() const fullName = computed(() => `${foo.firstName} ${foo.lastName}`) const reversedArray = computed(() => { return foo.array.slice(0).reverse() // .slice makes a copy of the array, instead of mutating the orginal }) } } </script>
Now loading...
<script> import { computed } from 'vue' /* ✗ BAD */ export default { setup() { const foo = useFoo() const fullName = computed(() => { foo.firstName = 'lorem' // <- side effect return `${foo.firstName} ${foo.lastName}` }) const reversedArray = computed(() => { return foo.array.reverse() // <- side effect - orginal array is being mutated }) } } </script>
Now loading...

🔧 Options

Nothing.

📚 Further Reading

🚀 Version

This rule was introduced in eslint-plugin-vue v3.6.0

🔍 Implementation