计算属性
模板内表达式非常方便,但它们实际上只适用于简单的操作。模板旨在描述视图的结构。在模板中放置过多的逻辑会导致模板臃肿且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式的原因。对于任何需要多个表达式的逻辑,您应该使用 **计算属性**。
基本示例
|
|
结果
a=1, b=2
这里我们声明了一个计算属性 b
。我们提供的函数将用作属性 vm.b
的 getter 函数。
|
您可以打开控制台并自己玩示例 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
回调更好。考虑以下示例
|
|
上面的代码是命令式的,而且重复。将其与计算属性版本进行比较
|
好多了,不是吗?
计算 setter
计算属性默认情况下是只读的,但您也可以在需要时提供 setter
|
现在,当您调用 vm.fullName = 'John Doe'
时,setter 将被调用,vm.firstName
和 vm.lastName
将相应地更新。
有关计算属性更新方式的技术细节,请参阅专门介绍响应性系统的 另一部分。
发现错误或想为文档做出贡献? 在 Github 上编辑此页面!