时间戳

首页 > 解决方案 > 简单的 Vue.js 计算属性说明

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

问题描述

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

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

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

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

标签： vue.jsvuejs2side-effectscomputed-properties

解决方案

这里的术语副作用是指在计算属性 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)

演示

推荐阅读