1仿吞、計(jì)算屬性

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

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

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

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

(1)模孩、例子

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

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

結(jié)果如下：

截圖1

(2)数焊、計(jì)算屬性緩存-vs-方法

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

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

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

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

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

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

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

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

(3)退盯、計(jì)算屬性的setter

計(jì)算屬性默認(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渊迁、偵聽器

雖然計(jì)算屬性在大多數(shù)情況下更合適慰照，但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過 watch 選項(xiàng)提供了一個更通用的方法琉朽，來響應(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 是一個實(shí)例方法
        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 會實(shí)時監(jiān)聽數(shù)據(jù)變化并改變自身的值剃允。
除了 watch 選項(xiàng)之外，您還可以使用命令式的 vm.$watch API齐鲤。