计算属性
我们展示的数据汪汪需要经过一定的处理,除了在模板中使用绑定表达式或者使用过滤器外,Vue.js还提供了计算属性,避免在模板中加入过多的业务逻辑,保证了模板结构的清晰和可维护性。
在Vue.js中,所有的计算属性都定义在computed
中
基础示例:
<span>{{fullName}}</span>
var vm = new Vue({
el: '#app',
data:{
firstName: 'San',
lastName: 'Zhang'
},
computed: {
fullName: function(){
return this.firstName + ' ' + this.lastName;
}
}
});
这里我们声明了一个计算属性fullName
。我们提供的函数将用作属性 vm.fullName
的 getter
函数。修改firstName或者lastName的值,fullName
的值也会随之改变。
计算属性的setter
计算属性默认只有 getter ,不过在需要时你也可以提供一个 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]
}
}
}
当我们修改fullName
的值时,firstName
和lastName
的值也会随之改变。
计算属性和调用方法的区别
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 firstName、lastName 还没有发生改变,多次访问 fullName
计算属性会立即返回之前的计算结果,而不必再次执行函数。
相比之下,每次访问fullName
,调用方法将总会再次执行函数。
如果我们不需要缓存,可以用方法代替计算属性。