计算属性、方法和侦听器

一、实例

var app = new Vue({
  el: '#app',
  // 数据
  data: {
    firstName: 'George',
    lastName: 'Washington',
    wholeName: ''
  },
  // 计算属性
  computed: {
    cSayHello: function(){
      return this.firstName + ' ' + this.lastName;
    }
  },
  // 方法
  methods: {
    mSayHello: function(){
      return this.firstName + ' ' + this.lastName;
    },
    changeWholeName: function(){
      this.wholeName = this.firstName + ' ' + this.lastName;
    }
  },
  // 侦听器
  watch: {
    // 监听data中的wholeName
    wholeName: function(){
      alert('wholeName改变了')
    }
  }
})

上面代码创建了一个带有data、computed、methods、watch信息的vue实例对象。下面我们来使用它：

  
{{ cSayHello }}
  
{{ mSayHello() }}
  点击得到全名
  
{{ wholeName }}

上面代码得到如下效果：

GIF.gif

由此可知：

• computed和data一样，直接使用属性名访问属性的值。不同的仅仅是computed属性的值是函数的返回值。
• 在访问methods的方法属性名时，不会返回其返回值，而是返回其方法声明，所以需要进行调用才能得到返回值
• watch用于监听data属性的变化，只有所监听的属性发送变化，才执行方法

二、比较

• computed和methods
  由上面的例子可以知道，访问computed属性和调用方法都可以实现返回一个计算值的需求。那么怎么选择二者呢？
  computed具有缓存特点，只有它依赖的部分发生变化时，它才会发生改变，并且这个依赖的部分指data的属性。
  所以，在所要展示的计算值完全依赖于data的属性值，那么使用computed；否则，应该使用methods。
• computed和watch
  由上面例子可以知道，computed和watch都存在着对data的属性值变化的响应。那么怎么选择二者呢？
  computed更倾向于进行简单的运算，而且它是对各部分依赖敏感的。所以，仅仅是简单的运算，而且值由多个依赖构成的，选择computed。相反，如果使用watch，那么就要监听多个data的属性值，就显得繁琐。所以，watch更倾向于监听一个独立的不含依赖的data属性值。比如，状态改变时进行异步操作或繁琐的处理逻辑更适合watch。

三、补充

computed不仅仅可以有getter，也可以有setter

var app = new Vue({
  el: '#app',
  data: {
    hello: 'hello',
    world: 'world'
  },
  computed: {
    say: {
      // getter 当获取say属性时触发
      get: function(){
        return this.hello + ' ' + world;
      },
      // setter 当给say属性赋值时触发
      set: function(newSay){
        var s = newSay.split(' ');
        this.hello = s[0];
        this.world = s[1];
      }
    }
  }
})

当使用app.say = 'hi vue'时，可以发现，hello和world的值变成了hi和vue

可以发现，这里可以用于整体改变computed的多个依赖值。

不过，使用方法调用的形式也可以达到同样的效果，那么使用setter有什么好处，暂时未知。