計算屬性 computed
- 模板中放入太多的邏輯會讓模板過重且難以維護 使用計算屬性可以讓模板更加的簡潔
- 計算屬性是基于它們的響應式依賴進行緩存的
- computed比較適合對多個變量或者對象進行處理后返回一個結果值类早,也就是說多個變量中的某一個值發(fā)生了變化則我們監(jiān)控的這個值也就會發(fā)生變化
<div id="app">
<!--
當多次調用 reverseString 的時候
只要里面的 num 值不改變 他會把第一次計算的結果直接返回
直到data 中的num值改變 計算屬性才會重新發(fā)生計算
-->
<div>{{reverseString}}</div>
<div>{{reverseString}}</div>
<!-- 調用methods中的方法的時候 他每次會重新調用 -->
<div>{{reverseMessage()}}</div>
<div>{{reverseMessage()}}</div>
</div>
<script type="text/javascript">
/*
計算屬性與方法的區(qū)別:計算屬性是基于依賴進行緩存的凄敢,而方法不緩存
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Nihao',
num: 100
},
methods: {
reverseMessage: function(){
console.log('methods')
return this.msg.split('').reverse().join('');
}
},
//computed 屬性 定義 和 data 以及 methods 平級
computed: {
// reverseString 這個是我們自己定義的名字
reverseString: function(){
console.log('computed')
var total = 0;
// 當data 中的 num 的值改變的時候 reverseString 會自動發(fā)生計算
for(var i=0;i<=this.num;i++){
total += i;
}
// 這里一定要有return 否則 調用 reverseString 的 時候無法拿到結果
return total;
}
}
});
</script>
計算屬性和methods的區(qū)別?
1. 定義語法一致躲株,需要return返回值
2. 使用語法不一致:methods必須() computed不需要()
3. computed具有緩存簇秒,methods沒有緩存