1. 使用方法
   computed可以添加很多實例屬性，這些屬性可以通過實例直接獲取到，是通過將作用函數(shù)作為屬性的getter，通過訪問屬性就能調用getter來返回值
   所以使用的是屬性，而不是屬性聲明的函數(shù)；

<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中屬性定義的時候，若只定義一個函數(shù)則默認為getter函數(shù),
   若要定義setter可以使用{}聲明多個屬性方法

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

調用setter函數(shù)的方法是vm.newProperty = 'newValue' 直接參數(shù)賦值即可

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內容發(fā)生變化，頁面會實時進行渲染

• method只要頁面有渲染就調用方法
  當input內容變化，message更新，發(fā)生渲染所以now2也會發(fā)生變化
• computed會緩存數(shù)據(jù)只有當依賴的數(shù)據(jù)發(fā)生變化才會調用函數(shù)，
  否則直接返回緩存的結果
  當input內容變化，message更新，因為now1中return中沒有數(shù)據(jù)內容只會渲染一次，所以不會調用多一次屬性定義的函數(shù)。（其實是因為依賴沒有，也就不會再發(fā)生變化了）

4. 與watched方法的不同
   為了觀察數(shù)據(jù)變化然后做出相應行為，往往使用簡單直接的watched來管擦數(shù)據(jù)變化，然后對觀察的數(shù)據(jù)定義變化后要實行的函數(shù)
   官方例子
   <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發(fā)生變化時能讓fullName也一起變化，這個時候就要添加watch來觀察變化且對fullName數(shù)據(jù)進行更新，
這樣做很繁瑣，要定義多個方法來對一個數(shù)據(jù)進行更新。

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

使用computed不用專門建立watch來觀察變化，而是依賴于firstName和 lastName，當發(fā)生變化時就會調用函數(shù)來對fullName進行渲染。