1、計算屬性

模板內(nèi)的表達式非常便利，但是它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：

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

在這個地方，模板不再是簡單的聲明式邏輯。且無法做到見文知意，需要看一段時間才會知道其表達的意思。多次引用此處的翻轉(zhuǎn)字符串時，會更加難以處理。

所以，對于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計算屬性，計算屬性關(guān)鍵詞: computed。

(1)、例子

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>計算后反轉(zhuǎn)字符串: {{ reversedMessage }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Cai!'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})

結(jié)果如下：

截圖1

(2)、計算屬性緩存-vs-方法

我們可以通過在表達式中調(diào)用方法來達到同樣的效果：

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>計算后反轉(zhuǎn)字符串: {{ reversedMessage }}</p>
<p>使用方法后反轉(zhuǎn)字符串: {{ reversedMessage2() }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Cai!'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reversedMessage2: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

可以將同一函數(shù)定義為一個方法而不是一個計算屬性。兩種方式的最終結(jié)果確實是完全相同的。然而，不同的是計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。

這也同樣意味著下面的計算屬性將不再更新，因為 Date.now() 不是響應(yīng)式依賴：

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每當(dāng)觸發(fā)重新渲染時，調(diào)用方法將總會再次執(zhí)行函數(shù)。

為什么需要緩存？假設(shè)我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的數(shù)組并做大量的計算。然后我們可能有其他的計算屬性依賴于 A 。如果沒有緩存，我們將不可避免的多次執(zhí)行 A 的 getter！如果你不希望有緩存，請用方法來替代。

(3)、計算屬性的setter

計算屬性默認(rèn)只有 getter ，不過在需要時你也可以提供一個 setter ：

<div id="app">
  <p>{{ site }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    name: 'HFMX',
    url: 'http://www.51ygcg.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 調(diào)用 setter， vm.name 和 vm.url 也會被對應(yīng)更新
vm.site = '明信陽光采購 http://www.51ygcg.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url); 

結(jié)果如下：

截圖2

2、偵聽器

雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過 watch 選項提供了一個更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的。

<div id = "computed_props">
    千米 : <input type = "text" v-model = "kilometers">
    米 : <input type = "text" v-model = "meters">
</div>

var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = val * 1000;
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一個實例方法
        vm.$watch('kilometers', function (newValue, oldValue) {
        // 這個回調(diào)將在 vm.kilometers 改變后調(diào)用
        document.getElementById ("info").innerHTML = 
       "修改前值為: " + oldValue + "，修改后值為: " + newValue;
    });

結(jié)果如下：

截圖3

當(dāng)我們再輸入框輸入數(shù)據(jù)時，watch 會實時監(jiān)聽數(shù)據(jù)變化并改變自身的值。
除了 watch 選項之外，您還可以使用命令式的 vm.$watch API。