Day 7 - 计算属性和监听器

计算属性(Computed Property)

当我们今天想针对某一变数做运算或是处理时，可以透过模板内的表达式，但是在模板中放入太多的逻辑会让模板过重且难以维护。诚如上一节所提到的观念，我们应该把数据处理与页面细节分开。

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

这时候我们便可以透过Vue的计算属性来定义我们想要的逻辑。

<template>
  <div id="app">
    <span>Message: {{ msg }}</span
    ><br />
    <span>Message: {{ reversedMessage }} </span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "Hello World!",
    };
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.msg.split("").reverse().join("");
    },
  },
};
</script>

结果如下，这里我们声明了一个计算属性，并在属性中对msg这个变数进行逆转字串的处理。

不过，这时候你可能会发现，那我用一般的method不就可以达到一样的效果了吗?

的确是这样的，我们可以使用method完成同样的事情:

<template>
  <div id="app">
    <span>Message: {{ msg }}</span
    ><br />
    <span>Message: {{ reversedMessage() }} </span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      msg: "Hello World!",
    };
  },
  methods: {
    reversedMessage() {
      return this.msg.split("").reverse().join("");
    },
  }
};
</script>

那计算属性的优势在哪里呢? 让我们仔细分晓。

计算快取 (Computed cache)

计算属性的优势在於，若资料没有更新，则该属性的 DOM 会显示上一次计算好的内容，称为 computed cache。

尽管可以使用method达到一样的效果，但意义上来说是明确不同的。

使用method可以用以下叙述解释，当每次 rerender 时 reverseMessage 会重新计算结果，因此如果 msg 在过程中有变更，则 reverseMesage 的结果也会跟着改变。

但若是计算属性的话，则可以解释为，因为我们更新了 message，这个操作会重新计算，并更新 computed cache。

使用 computed cache 的时机是，当有个需要消耗较多运算资源的资料（例如 AJAX）需要被显示在很多地方时，若用 method 则每个地方该方法都会被重新运算，会造成相当大的资源消耗，此时有 computed cache 可以大幅增进效能。

监听属性(Watched Property)

Vue 提供了一种相当方便的方式来观察Vue instance的资料，称作监听属性。适用於当我们有一些资料需要随着其它资料变动而更新时。

当 firstName 或 lastName 被更新时，watch 会去执行对应的两个函式，进而更新 fullName。

<template>
  <div id="app">
    {{ fullName }}
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      firstName: "Foo",
      lastName: "Bar",
      fullName: "Foo Bar",
    };
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + " " + this.lastName;
    },
    lastName: function (val) {
      this.fullName = this.firstName + " " + val;
    },
  },
};
</script>

不过，由於watch属性需要一直去监听资料变化，相较於计算属性会比较耗效能，所以最好评估是否真的有需要一直去监听特定资料，不然的话，尽量使用计算属性来代替。