计算属性和观察者

计算属性

在模板中放入太多的逻辑会让模板过重且难以维护。

代码

<div id="example">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>

你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。

代码

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: "#example",
  data: {
    message: &#39;Hello&#39;
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
    }
  }
})

你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。

计算属性缓存 vs 方法

代码

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
  }
}

两种方式的最终结果确实是完全相同的（methods中的方法和data中的值也存在着依赖关系）。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算属性 vs 侦听属性

侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch

代码

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: &#39;#demo&#39;,
  data: {
    firstName: &#39;Foo&#39;,
    lastName: &#39;Bar&#39;,
    fullName: &#39;Foo Bar&#39;
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + &#39; &#39; + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + &#39; &#39; + val
    }
  }
})

上面代码是命令式且重复的。将它与计算属性的版本进行比较：

代码

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

计算属性的 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：（不存在逆向绑定）

代码

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

侦听器

Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。