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:

 1 var app14 = new Vue({
 2   el: "#vfor",
 3   data: {
 4     mms: [
 5       {
 6         name: "mm1",
 7         location: "http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg"
 8       },
 9       {
10         name: "mm2",
11         location: "http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg"
12       },
13       {
14         name: "mm3",
15         location: "http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg"
16       },
17       {
18         name: "mm4",
19         location: "http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg"
20       }
21     ]
22   },
23     methods: {
24       addM: function() {
25         //增加一个MM
26         var len = this.mms.length;
27         function mmCreate(i) {
28           var mmX = {};
29           mmX.name = "mm" + i;
30           mmX.location =
31             "http://image.zhangxinxu.com/image/study/s/s128/mm" + i + ".jpg";
32           return mmX;
33         }
34         this.mms.push(mmCreate(len))
35       },
36       removeM: function() {
37         //减少一个MM
38         this.mms.pop();
39       }
40     }
41 });

 

 可以到这里查看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.

 

posted @ 2016-11-04 23:00  饭特稠  阅读(2145)  评论(0编辑  收藏  举报