为了方便维护,计算属性在处理一些复杂逻辑时是很有用的。对于处理复杂逻辑,就可以使用计算属性。
说明:
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数,简单的说,相比定义方法,计算属性性能更优。
<div id="example">
<p>原始字符串: "{{ message }}"</p>
<p>用计算属性处理过的字符串: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.replaceAll("o","33") //必须要有返回值
}
}
})
如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)实现,以下是显示及格人数的案例:
<table>
<tr v-for="(item,index) in list" v-if="failed(index)">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.grade}}</td>
</tr>
</table>
var app = new Vue({
el:"#app",
data:{
list:[
{name:"zhou",age: 11,grade: 91},
{name:"wu",age: 16,grade: 90},
{name:"zheng",age: 15,grade: 95},
{name:"wang",age: 14,grade: 99},
{name:"lee",age: 15,grade: 59},
{name:"chou",age: 20,grade: 54}
],
},
computed:{
failed(){
return function (index){
return this.list[index].grade>=60
}
}
}
})