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

Posted 2023-02-23

【中文标题】简单的 Vue.js 计算属性说明

【英文标题】：Simple Vue.js Computed Properties Clarification

【发布时间】：2019-02-26 17:14:03

【问题描述】：

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

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

---

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

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

【参考方案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