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

Question

我不是 Vue.js 的新手，但我正在再次阅读文档，试图找出我第一次错过的任何内容。我在 basic example section of using computed properties 中看到了这个声明:

You can data-bind to computed properties in templates just like a normal property. Vue is aware that vm.reversedMessage depends on vm.message, so it will update any bindings that depend on vm.reversedMessage when vm.message changes. And the best part is that we’ve created this dependency relationship declaratively: the computed getter function has no side effects, which makes it easier to test and understand.

---

关于我们以声明方式创建此依赖关系的部分:计算的 getter 函数没有副作用，我不清楚。我知道副作用是发生的一些与函数的纯意图没有直接关系的 Action ，但我不清楚它是如何在这个声明中使用的。

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

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

请注意 fullName 如何改变 firstName，以及 reversedArray 如何改变 array。如果使用 ESLint(例如，来自 Vue CLI 生成的项目)，您会看到 warning :

[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)

demo