Vue之計算屬性

上一篇里演示了計算屬性的優點，但是，computed和data里的屬性還是有區別的，computed的一個弱點就在於依賴於data屬性的更新，才能觸發視圖更新。

舉個例子：

上個例子中談到用v-for來加載妹子圖片，現在我想在原先的基礎上，添加兩個按鈕,一個用來增加一個妹子,一個用來減少一個妹子：

_html:

<div id="vfor">
    <template v-for="mm in mms">
        <span>{{mm.name}}</span>
        <image :src="mm.location"></image>
    </template>
    <button @click="addM">增加一個mm</button>
    <button v-on:click="removeM">減少一個mm</button>
</div>

js:

var app14 = new Vue({
  el: "#vfor",
  data: {
    mms: [
      {
        name: "mm1",
        location: "http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg"
      },
      {
        name: "mm2",
        location: "http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg"
      },
      {
        name: "mm3",
        location: "http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg"
      },
      {
        name: "mm4",
        location: "http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg"
      }
    ]
  },
    methods: {
      addM: function() {
        //增加一個MM
        var len = this.mms.length;
        function mmCreate(i) {
          var mmX = {};
          mmX.name = "mm" + i;
          mmX.location =
            "http://image.zhangxinxu.com/image/study/s/s128/mm" + i + ".jpg";
          return mmX;
        }
        this.mms.push(mmCreate(len))
      },
      removeM: function() {
        //減少一個MM
        this.mms.pop();
      }
    }
});

 

 可以到這里查看demo，這里通過button分別觸發addM()和removeM()方法，分別為mms數組增加一個元素和減少一個元素，實現了視圖上的MM的增加和減少。

使用computed屬性

現在，我覺得初始化data里的mms屬性太麻煩，所以准備在computed里面，用一個循環來初始化mms:

_js:

computed: {
    mms: function(){
        return [1,2,3,4].map(i => ({
        name: "mm" + i,
        location: `http://image.zhangxinxu.com/image/study/s/s128/mm${i}.jpg`
      }))
   }
}

 

通過一個函數返回arr。注意這里的computed屬性沒有依賴任何的data屬性。

這樣做，對於初始化mms來說是沒問題的。但是當點擊增加一個mm按鈕時，視圖並沒有更新，盡管mms數組發生了變化。原因就是上面所說的

computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed.