el: '#example',
data: {
message: '小火柴'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>
结果如下
这里声明了一个计算属性
reversedMessage 。提供的函数将用作属性
vm.reversedMessage 的 getter
console.log(vm.reversedMessage) // -> '柴火小'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'结果如下图所示，vm.reversedMessage依赖于vm.message的值，vm.reversedMessage本身并不能被赋值
【setter】
计算属性默认只有 getter ，不过在需要时也可以提供一个 setter
<script>
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取，值只须为函数
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
console.log(vm.aPlus);//2
vm.aPlus = 3
console.log(vm.a);//2
console.log(vm.aDouble);//4
</script>methods
通过调用表达式中的 methods 也可以达到同样的效果
[注意]不应该使用箭头函数来定义methods函数
<div id="example">
<p>原始字符串: "{{ message }}"</p>
<p>反向字符串: "{{ reversedMessage() }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: '小火柴'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>【缓存】
对于最终的结果，两种方式确实是相同的
然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数
相比而言，只要发生重新渲染，method 调用总会执行该函数。如下所示
<div id="example">
<p>计算属性: "{{ time1 }}"</p>
<p>methods方法: "{{ time2() }}"</p>
</div>
