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;
            }

        },
        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.

时间: 11-03

Vue之计算属性的相关文章

vue的计算属性

在模板中写入过多的逻辑使模板过重且难以维护.因此有了计算属性(computed)的产生. 你可以像绑定普通属性一样在模板中绑定计算属性,vue知道计算属性中的函数依赖data中的数据.所以当data中的数据发生变化时.所有依赖计算属性中的函数也会更新.而且最妙的是,我们已经以声明的方式创建了这种依赖关系:计算属性的getter是没有副作用的,这使得它易于推理和测试. 1,计算属性与methods 我们将同一函数定义为method,而不是一个计算属性,得到的结果都是一样的.然而两者的不同:计算属性

Vue.js 计算属性

Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8"> <title>computed</title> <script src="vue.min.js"></script> </head> <body> <div id="app"

vue中计算属性,方法,侦听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中计算属性,方法,侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="app&qu

关于vue的计算属性以及双向绑定的原理理解(vue2.x)以及vue3.0

vue的计算属性: 1.什么是计算属性? 计算属性的目的是用于对数据进行简单运算的,若在模板中放过多的计算逻辑会导致模板难以维护. 计算属性是基于它们的依赖进行缓存的.计算属性只有在它的相关依赖发生改变时才会重新求值. 2.计算属性如何使用? 1.在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调用等,只要最终返回一个结果就可以. computed: { reverseText: function(){ return app1.text.split('').reverse().join('

Vue中计算属性

一般情况下属性都是放在data中的,但是有些属性可能是需要经过一些计算才能得出,那么,我们可以把这类属性变成计算属性.此时,需要将这些计算属性写到computed中,和将属性写在data中是一样的.表面上看,计算属性和methods一样,实际上,计算属性更加智能,他是基于它们的响应式依赖进行缓存的.也就是说,只要相关依赖(比如下面的例子中的“area”)没有发生变化,那么这个计算属性的函数就不会重新执行,而是直接返回之前的值.这个缓存功能使计算属性访问起来更高效. 计算属性set: set方法是

通俗易懂了解Vue的计算属性

1.前言 之前在学习vue的过程中,一直没有搞明白计算属性是个怎么回事,以及为什么要有计算属性,使用计算属性有什么好处.今天花时间翻了翻官方文档,才搞清楚其中一二,现将学习心得总结记录如下. 2.为什么要使用计算属性 试想有这样一个场景: 当我们在网购的时候,打开购物车,我们在增加或减少购物车内货物的数量时,下面的消费总额也在随着联动变化. 那么有了这个场景,我们用vue来简单实现一下.话不多说,直接上代码: 1 <!DOCTYPE html> 2 <html lang="en

VUE:计算属性和监视

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.计算属性: 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算结果 2.监视属性: 通过vm对象的$watch()或watch配置来监视指定的属性 当属性变化时,回调函数自

Vue(二) 计算属性

模板内的表达式常用于简单的运算,当过长或逻辑复杂时,难以维护,计算属性就是解决该问题的 什么是计算属性 表达式如果过长,或逻辑更为复杂,就会变得臃肿甚至难以维护,比如: <div> {{ text.split('.').reverse().join('.') }} </div> 该表达式包含 3 个操作,并不是很清晰,可以用计算属性进行改写: <div id="app"> {{ reverseText }} </div> <scri

Vue computed 计算属性

<template> <div id="app"> <div>{{reverseTitle}}</div> <div>{{reverseTitle2()}}</div> <button @click="add()">补充货物1</button> <div>总价为:{{price}}</div> </div> </template&