computed

1. 使用方法
   computed可以添加很多实例属性，这些属性可以通过实例直接获取到，是通过将作用函数作为属性的getter，通过访问属性就能调用getter来返回值
   所以使用的是属性，而不是属性声明的函数；

<p>{{ message }}</p>
<p>Reversed Message : "{{ reverseMessage1 }}"</p>  
<p>Reversed Message : "{{ reverseMessage2() }}"</p>

computed: {
      reverseMessage1: function () {
      return this.message.split('').reverse().join('');
      },
}
methods: {
      reverseMessage2: function () {
      return this.message.split('').reverse().join('');
      },
}

所以在上面代码中模板中调用的是属性所以不带括号，而methods定义的是方法所以在使用的时候要加 ( ) ；

2. getter与setter
   computed中属性定义的时候，若只定义一个函数则默认为getter函数,
   若要定义setter可以使用{}声明多个属性方法

computed: {
  newProperty: {
    // getter
    get: function () {
      return this.msg + this.msg
    },
    // setter
    set: function (newValue) {
      this.msg = this.msg + newValue
    }
  }
}

调用setter函数的方法是vm.newProperty = 'newValue' 直接参数赋值即可

3. 与method的不同

<input type="text" v-model="message">
<p>{{ message }}</p>
<p>{{ now1 }}</p>
<p>{{ now2 }}</p>

computed: {
    now1: function () {
       return Date.now();
    }
},
 methods: {
     now2: function () {
       return Date.now();
     }
}

input标签和message双向绑定，当input内容发生变化，页面会实时进行渲染

• method只要页面有渲染就调用方法
  当input内容变化，message更新，发生渲染所以now2也会发生变化
• computed会缓存数据只有当依赖的数据发生变化才会调用函数，
  否则直接返回缓存的结果
  当input内容变化，message更新，因为now1中return中没有数据内容只会渲染一次，所以不会调用多一次属性定义的函数。（其实是因为依赖没有，也就不会再发生变化了）

4. 与watched方法的不同
   为了观察数据变化然后做出相应行为，往往使用简单直接的watched来管擦数据变化，然后对观察的数据定义变化后要实行的函数
   官方例子
   <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
    }
  }
})

这里为了让firstName或者lastName发生变化时能让fullName也一起变化，这个时候就要添加watch来观察变化且对fullName数据进行更新，
这样做很繁琐，要定义多个方法来对一个数据进行更新。

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

使用computed不用专门建立watch来观察变化，而是依赖于firstName和 lastName，当发生变化时就会调用函数来对fullName进行渲染。