Skip to content

Latest commit

 

History

History
122 lines (94 loc) · 3.32 KB

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

File metadata and controls

122 lines (94 loc) · 3.32 KB
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/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>
<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>
<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>
<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>

🔧 Options

Nothing.

📚 Further Reading

🚀 Version

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

🔍 Implementation