Vue 中的计算属性

Question

在 Vue 中， 计算属性 中放入过多的逻辑 模板 表达式，例如，假设您的应用有一个评论列表，并且您想要显示所有评论的平均值。

const app = new Vue({
  data: () => ({
    reviews: [
      { score: 5 },
      { score: 3 },
      { score: 4 }
    ]
  }),
  // Computing the average in a template expression is awkward
  template: `
    <div>
      {{reviews.reduce((sum, v) => sum + v.score, 0) / reviews.length}} ({{reviews.length}} reviews)
    </div>
  `
});

您可以创建一个计算属性，而不是在模板中计算平均值 average，并使用 average 而是在模板表达式中。

const app = new Vue({
  data: () => ({
    reviews: [
      { score: 5 },
      { score: 3 },
      { score: 4 }
    ]
  }),
  computed: {
    // `average` is a computed property. Vue will call `computeAverage()`
    // for you when a `data` property changes.
    average: function computeAverage() {
      if (this.reviews.length === 0) {
        return 0;
      }
      return this.reviews.
        reduce((sum, v) => sum + v.score, 0) / this.reviews.length;
    }
  },
  template: `
    <div>
      {{average}} ({{reviews.length}} reviews)
    </div>
  `
});

何时使用计算属性与方法

您还可以使用 Vue 方法来抽象出复杂的模板逻辑，如下所示。

const app = new Vue({
  data: () => ({
    reviews: [
      { score: 5 },
      { score: 3 },
      { score: 4 }
    ]
  }),
  methods: {
    // `average` is a method that's called in the template expression
    average: function average() {
      if (this.reviews.length === 0) {
        return 0;
      }
      return this.reviews.
        reduce((sum, v) => sum + v.score, 0) / this.reviews.length;
    }
  },
  template: `
    <div>
      {{average()}} ({{reviews.length}} reviews)
    </div>
  `
});

这两种方法都有效，但 Vue 会根据它们的 反应值 缓存计算的属性 。
换句话说，Vue 弄清楚了什么 data 您的计算属性依赖的字段，并且不会重新计算计算属性，除非其中之一 data 字段变化。

例如，如果您有一个仅依赖于的计算属性 field1，如果你修改了 Vue 不会重新计算属性 field2。

const app = new Vue({
  data: () => ({
    field1: 'row',
    field2: 'your boat'
  }),
  computed: {
    // Vue will **only** call` getter()` when `field2` changes. Vue will
    // not call `getter()` when `field1` changes.
    field2Upper: function getter() {
      console.log('Called!');
      return this.field2.toUpperCase();
    }
  },
  template: `
    <div>
      <div>
        {{field1}} {{field2Upper.toLowerCase()}}
      </div>
      <button v-on:click="field1 += ' row'">Add</button>
    </div>
  `
});

如果您的计算属性很昂贵，则计算属性可以使您免于不必要的重新计算。 Vue 有一个聪明的算法来跟踪你的计算属性所依赖的属性 。 当函数 getter() 以上访问 field2，Vue 拦截该属性访问并将其添加到字段列表中 getter() 取决于。