四、Vue计算属性

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 取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。