快捷導(dǎo)航

Vue.js計(jì)算屬性computed與watch（5）

更新時間：2016年12月09日 09:23:25 作者：wenjuanzhao

這篇文章主要為大家詳細(xì)介紹了Vue.js計(jì)算屬性computed與watch,具有一定的參考價值，感興趣的小伙伴們可以參考一下

在模板中綁定表達(dá)式是非常便利的，但是它們實(shí)際上只用于簡單的操作。模板是為了描述視圖的結(jié)構(gòu)。在模板中放入太多的邏輯會讓模板過重且難以維護(hù)。這就是為什么 Vue.js 將綁定表達(dá)式限制為一個表達(dá)式。如果需要多于一個表達(dá)式的邏輯，應(yīng)當(dāng)使用**計(jì)算屬性**。

Vue實(shí)例的computed的屬性

 <div class="test">
    <p>原始的信息{{message}}</p>
    <p>計(jì)算后的信息{{ComputedMessage}}</p>
  </div>

js代碼

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

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

計(jì)算后的ComputedMessage屬性始終是依賴于message的

通過調(diào)用函數(shù)實(shí)現(xiàn)同樣的效果

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

js代碼

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

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

使用vue實(shí)例的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屬性設(shè)置setter getter是默認(rèn)就有的。

演示set和get的調(diào)用過程

  <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；

在點(diǎn)擊按鈕為fullName賦值的時候首先調(diào)用set 再調(diào)用get方法。

自定義的Watcher

雖然計(jì)算屬性在大多數(shù)情況下是非常合適的，但是有的時候也需要自定義一個watcher。這是因?yàn)槟阆胍跀?shù)據(jù)變化響應(yīng)的時候，執(zhí)行異步操作胡總和其他的操作是非常有用的。

您可能感興趣的文章: