DIV CSS 佈局教程網

在模板中綁定表達式是非常便利的，但是它們實際上只用於簡單的操作。模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 Vue.js 將綁定表達式限制為一個表達式。如果需要多於一個表達式的邏輯，應當使用**計算屬性**。

Vue實例的computed的屬性

 <div class="test">
    <p>原始的信息{{message}}</p>
    <p>計算後的信息{{ComputedMessage}}</p>
  </div>

js代碼

 var myVue = new Vue({
    el: ".test",
    data: {
      message:12
    },
    computed:{
      ComputedMessage:function () {
        return this.message+10;
      }
    }
  });

界面會顯示 12 和 22
上述的方式是一種緩沖的實現的效果，這種實現的方式依賴於它的緩寸，計算得到的屬性只有在相關依賴（message）改變的時候才會重新取值，這就意味著只要message沒有發生改變的時候，多次訪問ComputedMessage都不會再重新執行計算的這個屬性。。

計算後的ComputedMessage屬性始終是依賴於message的

通過調用函數實現同樣的效果

 <div class="test">
    <p>原始的信息{{message}}</p>
    <p>計算後的信息{{MessageFunction()}}</p>
  </div>

js代碼

 var myVue = new Vue({
    el: ".test",
    data: {
      message:12
    },
    methods:{
      MessageFunction:function () {
        return this.message+10;
      }
    }
  });

得到的結果和上面的結果是一樣的，但是每次被重新渲染的時候都會被重新調用。
所以使用上述兩種方式的時候，首先要確定你是否需要借助緩存

使用vue實例的watch

這個沒有看懂呀
但是使用computed這個屬性更加的方便和快捷

  <div class="test">
    <p>原始的信息{{fullName}}</p>
  </div>

js代碼

  var myVue = new Vue({
    el: ".test",
    data: {
      firstName:"fur",
      lastName:"bool"
    },
    computed:{
      fullName:function () {
        return this.firstName+this.lastName
      }
    }
  });

而且你可以computed屬性設置setter getter是默認就有的。

演示set和get的調用過程

  <div class="test">
    <p>原始的信息{{fullName}}</p>
    <button @click="fu">test</button>
  </div>

js代碼

 var myVue = new Vue({
    el: ".test",
    data: {
      firstName:"fur",
      lastName:"bool",
      fullName:"sasas dsdsd dsds"
    },
    computed:{
      fullName:{
        get:function () {
          console.log("get")
          return this.firstName+this.lastName
        },
        set:function(value){
          var names=value.split(" ");
          this.firstName=names[0];
          this.lastName=names[names.length-1];
          console.log("set");
        }
      }
    },
    methods:{
      fu:function () {
        myVue.fullName="sasas dsdsd dsds";
        console.log(myVue.firstName);   //sasas
        console.log(myVue.lastName);  //dsds
      }
    }
  });

首先會輸出get；

在點擊按鈕為fullName賦值的時候首先調用set 再調用get方法。

自定義的Watcher

雖然計算屬性在大多數情況下是非常合適的，但是有的時候也需要自定義一個watcher。這是因為你想要在數據變化響應的時候，執行異步操作胡總和其他的操作是非常有用的。