简单的 Vue.js 计算属性说明

Question

我对 Vue.js 并不陌生，但我正在再次浏览文档，试图找出我第一次错过的任何内容。我在使用计算属性的基本示例部分遇到了这个语句：

您可以将数据绑定到模板中的计算属性，就像普通属性一样。Vue 知道vm.reversedMessage取决于vm.message，因此它会更新任何依赖于vm.reversedMessage何时vm.message更改的绑定。最好的部分是我们以声明方式创建了这种依赖关系：计算得到的 getter 函数没有副作用，这使得它更容易测试和理解。

---

关于我们以声明方式创建这种依赖关系的部分：计算得到的 getter 函数没有副作用，我不清楚。我确实理解副作用是发生的一些与函数的纯意图没有直接关系的动作，但我不清楚它在这个语句中是如何使用的。

有人可以进一步解释相反的可能是什么吗？可能发生的潜在副作用是什么？

Answer 1

这里的术语副作用是指在计算属性 getter 中执行的任何数据突变。例如：

export default {
  data() {
    return {
      firstName: 'john',
      lastName: 'doe',
      array: [1,2,3]
    }
  },
  computed: {
    fullName() {
      this.firstName = 'jane'; // SIDE EFFECT - mutates a data property
      return `${this.firstName} ${this.lastName}`
    },
    reversedArray() {
      return this.array.reverse(); // SIDE EFFECT - mutates a data property
    }
  }
}

注意如何fullNamemutatesfirstName和reversedArraymutates array。如果使用 ESLint（例如，从Vue CLI生成的项目），您会看到警告：

[eslint] Unexpected side effect in "fullName" computed property. (vue/no-side-effects-in-computed-properties)
[eslint] Unexpected side effect in "reversedArray" computed property. (vue/no-side-effects-in-computed-properties)

演示