vue.js实战学习——计算属性

 注：此内容摘抄自：梁灏的《Vue.js实战》

注：记得要引入vue.js才能运行哦，文章中贴出的代码直接复制是不行的，html css js 都放在了一起，而且也没有引用vue.js。

1.在遇到复杂的逻辑时应该使用计算属性。

<div class="app1">
    {{reversedText}}
</div>

var app1=new Vue({
    el:'.app1',
    data:{
        text:'123,456'
    },
    computed:{
        reversedText:function(){
            return this.text.split(',').reverse().join(',');
        }
    }
});

所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。

2.每一个计算属性都包含一个getter和一个setter，当手动修改计算机属性的值就像修改一个普通数据那样时，就会触发setter函数。

<div class="app3">
    姓名:{{fullName}}
</div>

var app3=new Vue({
    el:'.app3',
    data:{
        firstName:'Jack',
        lastName:'Greeen'
    },
    computed:{
        fullName:{
            get:function(){
                return this.firstName+' '+this.lastName;
            },
            set:function(newValue){
                var names=newValue.split(' ');
                this.firstName=names[0];
                this.lastName=names[names.length-1];
            }
        }
    }
});
app3.fullName="Nancy Chen";

绝大多数情况下，我们只会用默认的getter方法来读取一个计算属性，在业务中很少用到setter，所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter和setter都声明。

小技巧：一是计算属性可以依赖其他计算属性；二是计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据。

3.计算属性缓存

你可能发现调用methods里的方法也可以与计算属性气到同样的作用。

<div class="app4">
    <!-- 注意，这里的reversedText 是方法，所以要带（）-->
    {{reversedText()}}
</div>

var app4=new Vue({
    el:'.app4',
    data:{
        text:'123,4567'
    },
    methods:{
        reversedText:function(){
            //这里的this指向的是当前Vue实例
            return this.text.split(',').reverse().join(',');
        }
    }
})

没有使用计算属性，在methods里定义了一个方法实现了相同的效果，甚至该方法还可以接受参数，使用起来更灵活。为啥还要计算属性呢？原因是计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以只要text不变，计算属性也就不会更新。但methods则不同，只要重新渲染，它就会被调用，因此函数也就会被执行。

使用哪种取决于你是否需要缓存。

 

 注：此内容摘抄自：梁灏的《Vue.js实战》