Question

我对Vue.js并不陌生，但是我再次浏览了文档，试图了解我第一次错过的任何内容。我在basic example section of using computed properties中碰到过此声明：

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

关于我们已经声明性地创建了这种依赖关系的部分：计算出的吸气剂函数没有副作用，对我来说还不清楚。我确实知道副作用是发生了一些与该功能的纯意图没有直接关系的动作，但是我不清楚在此语句中它是如何使用的。

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

Answer 1

此处的副作用是指在计算的属性获取器中执行的任何数据突变。例如：

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

简单的Vue.js计算属性澄清

1 个答案: