no-side-effects-in-computed-properties.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/no-side-effects-in-computed-properties	disallow side effects in computed properties	v3.6.0

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

disallow side effects in computed properties

• ⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-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.

📚 Further Reading

• Guide - Computed Caching vs Methods

🚀 Version

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

🔍 Implementation

• Rule source
• Test source