1说墨、計算屬性的定義
//js部分
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
//計算屬性的定義
computed:{ //該函數(shù)必須有返回值胚宦，用來獲取屬性果录，成為get函數(shù)冗酿，在這里面可以進(jìn)行邏輯處理
msg:function () {
return '歡迎來到vue'
}
}
})
</script>
//html部分
<h2>{{msg}}</h2> //歡迎來到vue
image.png
computed可以對數(shù)據(jù)進(jìn)行監(jiān)視當(dāng)這個
msg的值唄修改之后米母，reversMsg的值也會跟著改變
2下愈、計算屬性 vs 方法
將計算屬性的get函數(shù)定義為一個方法也可以實現(xiàn)類似的功能
區(qū)別：
a.計算屬性是基于它的依賴進(jìn)行更新的，只有在相關(guān)依賴發(fā)生改變時才能更新變化
b.計算屬性是緩存的署拟，只要相關(guān)依賴沒有改變婉宰，多次訪問計算屬性得到的值是之前緩存的計算結(jié)果，不會多次執(zhí)行
get和set
計算屬性由兩部分組成：get和set推穷，分別用來獲取計算屬性和設(shè)置計算屬性
默認(rèn)只有g(shù)et心包，如果需要set，要自己添加
<body>
<div id="itany">
<!--
1.基本用法
-->
<h2>{{msg}}</h2>
<h2>{{msg2}}</h2>
<!-- 對數(shù)據(jù)處理再顯示 -->
<h2>{{msg.split(' ').reverse().join(' ')}}</h2>
<h2>{{reverseMsg}}</h2>
<button @click="change">修改值</button>
<!--
2.計算屬性 vs 方法
-->
<!-- <h2>{{num1}}</h2>
<h2>{{num2}}</h2>
<h2>{{getNum2()}}</h2> -->
<button onclick="fn()">測試</button>
<!--
3.get和set
-->
<h2>{{num2}}</h2>
<button @click="change2">修改計算屬性</button>
</div>
<script>
var vm=new Vue({
el:'#itany',
data:{ //普通屬性
msg:'welcome to itany',
num1:8
},
computed:{ //計算屬性
msg2:function(){ //該函數(shù)必須有返回值馒铃，用來獲取屬性蟹腾，稱為get函數(shù)
return '歡迎來到南京網(wǎng)博';
},
reverseMsg:function(){
//可以包含邏輯處理操作，同時reverseMsg依賴于msg
return this.msg.split(' ').reverse().join(' ');
},
num2:{
get:function(){
console.log('num2：'+new Date());
return this.num1-1;
},
set:function(val){
// console.log('修改num2值');
// this.num2=val;
this.num1=111;
}
}
},
methods:{
change(){
// this.msg='i love you';
this.num1=666;
},
getNum2(){
console.log(new Date());
return this.num1-1;
},
change2(){
this.num2=111;
}
}
});
function fn(){
setInterval(function(){
// console.log(vm.num2);
console.log(vm.getNum2());
},1000);
}
</script>
</body>
