事例
computedの中でdataを書き換えると
vue/no-side-effects-in-computed-properties
というエラーが出る
公式によると、computedがこのような副作用を持つと、可読性が悪くなりかつ予測不可能になりやすいため
たしかにcomputedが動いたときに毎回値自体が変更されるのは後々混乱を生む未来しか見えません
値を変更するつもりがなくても、Arrayなどは元の配列の値を変更する関数を使ってしまい引っ掛かることがありそうなので、注意が必要そうです
値を変更するつもりがないのにこのエラーに引っ掛かったら、元の値を変更してしまっている処理がないか確認が必要ですね
良い例
computed: {
fullName () {
return `${this.firstName} ${this.lastName}`
}
}
悪い例
computed: {
fullName () {
this.firstName = 'taro' // firstName自体を書き換えているためside-effectsに引っ掛かる
return `${this.firstName} ${this.lastName}`
}
}
