1、什么事计算属性
在模板中双向绑定一些数据或表达式。但是表达式如果过长，或逻辑更为复杂时，就会变得雕肿甚至难以阅读和维护，如：
{{ text.split ( ’,’ ) .reverse () . join (’,’)}}，
可改写为：
var app =new Vue({
el :’#app ’,
data ：也
text :’ 123,456 ’
},
computed : {
reversedText: function () {
／／这里的this 指向的是当前的Vue 实例
return this . text.split ( ’ , ’ ) . reverse() . join (’, ’ );
}
})
2、计算属性用法
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结
果就可以。除了上例简单的用法，计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
每一个计算属性都包含－个ge 忧er 和一个setter ，我们上面的两个示例都是计算属性的默认用法， 只是利用了ge忧er 来读取。在你需要时，也可以提供一个se忧er 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发se忧er 函数，执行一些自定义的操作。
var app =new Vue ( {
el : ’ #app ’,
data : {
firstName :’ Jack ’,
lastName :’Green ’
},
computed : {
fullName : {
//getter ，用于读取
get: function () {
return this . firstName +’’+ this . lastName;
}
//setter ，写入时触发
set: function (newValue) {
var names= newValue.split (”);
this . firstName = names[O);
this.lastName = names[names.length - l];
}
}
}
绝大多数情况下，我们只会用默认的getter 方法来读取一个计算属性，在业务中很少用到setter，所以在声明一个计算属性时，可以直接使用默认的写法，不必将getter 和setter都声明。
计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性： 二是计算属性不仅可以依赖当前Vue 实例的数据，还可以依赖其他实例的数据；
3、计算属性缓存
一个计算属性所依赖的数据发生变化时，它才会重新取值，所以text 只要不改变，计算属性也就不更新；
使用计算属性还是methods 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
网友评论