计算属性

模板内表达式非常方便,但它们实际上只适用于简单的操作。模板旨在描述视图的结构。在模板中放置过多的逻辑会导致模板臃肿且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式的原因。对于任何需要多个表达式的逻辑,您应该使用 **计算属性**。

基本示例

<div id="example">
a={{ a }}, b={{ b }}
</div>
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// a computed getter
b: function () {
// `this` points to the vm instance
return this.a + 1
}
}
})

结果

a=1, b=2

这里我们声明了一个计算属性 b。我们提供的函数将用作属性 vm.b 的 getter 函数。

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3

您可以打开控制台并自己玩示例 vm。vm.b 的值始终依赖于 vm.a 的值。

您可以在模板中像普通属性一样将数据绑定到计算属性。Vue 知道 vm.b 依赖于 vm.a,因此当 vm.a 发生变化时,它将更新任何依赖于 vm.b 的绑定。最棒的是,我们以声明的方式创建了这种依赖关系:计算 getter 函数是纯粹的,没有副作用,这使得它易于测试和推理。

计算属性 vs. $watch

Vue.js 提供了一个名为 $watch 的 API 方法,允许您观察 Vue 实例上的数据变化。当您有一些需要根据其他数据进行更改的数据时,使用 $watch 很诱人 - 特别是如果您来自 AngularJS 背景。但是,使用计算属性通常比使用命令式 $watch 回调更好。考虑以下示例

<div id="demo">{{fullName}}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})
vm.$watch('lastName', function (val) {
this.fullName = this.firstName + ' ' + val
})

上面的代码是命令式的,而且重复。将其与计算属性版本进行比较

var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})

好多了,不是吗?

计算 setter

计算属性默认情况下是只读的,但您也可以在需要时提供 setter

// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...

现在,当您调用 vm.fullName = 'John Doe' 时,setter 将被调用,vm.firstNamevm.lastName 将相应地更新。

有关计算属性更新方式的技术细节,请参阅专门介绍响应性系统的 另一部分

This is the documentation for an older version of Vue.
If you’re looking for the current documentation click here.