夜光序言:
我也曾数十次地感受着秋意带来生活特别的感触,以及带来了生活不同的意义。在过去二十二载的秋季之时,不曾以笔绘秋,以文摹凉。秋季带给除了童年时候与伙伴一起嬉戏的情景,不曾认真的感受秋真正的面貌和内涵。
正文:
Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
<template>
<div id="app">
{{ message.split('').reverse().join('') }}
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
</template>
<script>
export default{
data(){
return{
type:'C',
message:'Yeguang'
}
},
computed:{
//计算属性的getter
reversedMessage:function () {
// this 指向 vm实例
return this.message.split('').reverse().join('')
}
}
}
</script>
<style>
</style>
上述声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新。
嗯唔:computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。