首页 > 代码库 > Vue之计算属性

Vue之计算属性

2024-08-19 00:14:18   223人阅读

上一篇里演示了计算属性的优点，但是，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;
            }

        },
        removeM:function(){//减少一个MM
          this.mms.pop();
        }
    }
});

 这里通过button分别触发addM()和removeM()方法，分别为mms数组增加一个元素和减少一个元素，实现了视图上的MM的增加和减少。

使用computed属性

现在，我觉得初始化data里的mms属性太麻烦，所以准备在computed里面，用一个循环来初始化mms:

js:

computed:{
        mms:function(){
            var arr=[];
            for(var i= 1;i<4;i++){
                var temObj={};
                    temObj.name=‘mm‘+i;
                    temObj.location=‘http://image.zhangxinxu.com/image/study/s/s128/mm‘+i+‘.jpg‘;
                arr.push(temObj);
            }
            return arr;
        }
    }

通过一个函数返回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.

 

Vue之计算属性


联系
我们