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

禁止计算属性中的副作用

⚙️ 此规则包含于 "plugin:san/essential", "plugin:san/strongly-recommended" 和 "plugin:san/recommended".

# 📖 规则细节

此规则目的是防止在计算属性中产生副作用，同时由于 computed 属性中的 this 为 data 对象，因此也无法通过 this 访问组件上的属性或者方法。

在计算属性中引入副作用被认为是一种非常糟糕的做法。它使代码不可预测且难以理解。

<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...

# 🔧 配置

暂无。

# 📚 深入阅读

计算属性 (opens new window)

# 🔍 实现

← san/no-reserved-keys san/no-textarea-mustache →