计算属性和侦听器

计算属性具有缓存数据效果。
侦听器适用于响应数据时进行异步或开销较大的操作。

计算属性

模板内表达式简单的如果数量太多则让模板过重而且难以维护。

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

简单需求 =》 声明式逻辑
复杂需求 =》 计算属性

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

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

计算属性：响应式依赖进行缓存，只在相关响应式依赖发生改变的时候才会重新求值。
只要message值没有发生改变则reversedMessage会直接返回之前的计算结果而不用重新执行函数。

计算属性 vs 侦听属性

Vue提供更通用的方式来观察和响应Vue实例上的数据变动： 【侦听属性】
当有一些数据随着其他数据变动而变动时，容易滥用watch回调。

<div id="demo">{{fullName}}</div>

var vm = new Vue({
  el: "#demo",
  data: {
    firstName: "Foo",
    lastName: "Bar",
    fullName: "Foo Bar"
  },
  // 属性侦听
  watch: {
    firstName: function(val){
      this.fullName = val + " " + this.lastName;
    },
    lastName: function(val){
      this.fullName = this.firstName + " " + val;
    }
  },
  // 计算属性
  computed: {
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
  }
});

计算属性的setter

计算属性默认只有getter，在需要的时候可以提供一个setter

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

侦听器

watch =》 响应数据的变化。在数据变化的时候执行【异步或开销较大】的操作。