记录一下今天学习的计算属性相关的东西。
计算属性的语法格式是：computed: {}
计算属性
计算属性一般是为了简化模板中的内容，让模板中内容尽可能简洁。如果我们将太多的逻辑写在模板中，模板将会变得难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
所以，对于任何复杂逻辑，你都应当使用计算属性。
举个栗子：
<body>
<div id="app">
{{fullName}}
<!-- {{fullName()}} 方法使用的，因为方法需要调用！ -->
{{age}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
firstName:'Dell',
lastName:'Lee',
age: 28
},
// 计算属性完成名字的组合(有缓存，更推荐)
// 自带缓存，如果相关的值没有改变，改变页面其他元素的值，不需要重新计算
computed: {
fullName(){
console.log('计算了一次');
return this.firstName + ' ' + this.lastName;
}
},
// 方法完成名字的组合（无缓存）
// 方法内部没有缓存机制，相关的值即便没有改变，刷新页面时仍旧需要重新计算
// methods: {
// fullName(){
// console.log('计算了一次');
// return this.firstName + ' ' + this.lastName;
// }
// },
})
</script>
你应该发现了fullName更像一个方法，而不像一个属性。这是因为计算属性的简写方式导致，不是它的原始样子，原始样子如下：
<script>
computed: {
fullName:{
get(){
return this.firstName +' '+this.lastName;
},
}
},
</script>
计算属性默认只有get方法，当只有get方法时，就可以进行简写。
当然，如果有需要，我们可以为计算属性提供它的set方法，set方法在计算属性的值被修改时自动调用。这里主要先理解下get方法。
通常情况下，我们只会用到get方法，所以简写形式居多，但不要把它当做方法。它跟方法是不一样的，方法的每次调用，方法内部逻辑都会执行一遍。计算属性却不会，它具备基于依赖的缓存能力。下面例子来证实这个现象。
<div id="app">
<div>{{reverseMsg}}</div>
<div>{{reverseMsg}}</div>
<hr>
<div>{{reverseStr(msg)}}</div>
<div>{{reverseStr(msg)}}</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'Hello'
},
computed: {
reverseMsg() {
console.log('computed')
return this.msg.split('').reverse().join('')
}
},
methods: {
reverseStr() {
console.log('method')
return this.msg.split('').reverse().join('')
}
}
})
</script>
上面代码中，计算属性在模板中使用了两次，方法调用也使用了两次，打印发现
方法中的打印语句执行了两次，而计算属性中的打印语句却只执行了一次。这就验证了，计算属性的简写形式虽然长得跟方法一模一样，但它确实不是方法。
总结：
方法的每次调用，方法内部逻辑都会执行一遍。计算属性却不会，它具备基于依赖的缓存能力。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
