1)定義計(jì)算屬性的時(shí)候是按照定義方法的標(biāo)準(zhǔn)(須有返回值return)
2)使用計(jì)算屬性的時(shí)候則可以和數(shù)據(jù)一樣使用(無需括號(hào))
3)如果使用方法定義表達(dá)式,則會(huì)重復(fù)調(diào)用該方法瓢谢,消耗內(nèi)存畸写,減少性能
4)使用計(jì)算屬性的話可有效避免第三條出現(xiàn)的情況,該表達(dá)式在計(jì)算屬性中只會(huì)請(qǐng)求一次
5)計(jì)算屬性適用于:
當(dāng)某個(gè)新數(shù)據(jù)是依賴于某一些原始數(shù)據(jù)計(jì)算得到的氓扛,這時(shí)候就該新數(shù)據(jù)應(yīng)該用計(jì)算屬性定義
只有原始數(shù)據(jù)不發(fā)生變化枯芬,不管使用了多少次計(jì)算數(shù)據(jù),該計(jì)算屬性的方法只會(huì)調(diào)用一次
只有當(dāng)所依賴的原始數(shù)據(jù)發(fā)生變化時(shí)采郎,計(jì)算屬性的方法才重新調(diào)用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"/>
<p>{{msg}}</p>
<p>{{newMsg()}}</p>
<p>{{newMsg()}}</p>
<p>{{newMsg()}}</p>
<p>{{strMsg}}</p>
<p>{{strMsg}}</p>
<p>{{strMsg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
//定義數(shù)據(jù)
msg:"hello"
},
methods:{
//定義方法(多次調(diào)用)
newMsg(){
console.log("調(diào)用方法")
return this.msg.toUpperCase();
}
},
computed:{
//計(jì)算屬性(調(diào)用一次)
strMsg:function(){
console.log("調(diào)用計(jì)算屬性")
return this.msg.toUpperCase()
}
}
});
/*總結(jié):
1)定義計(jì)算屬性的時(shí)候是按照定義方法的標(biāo)準(zhǔn)(須有返回值return)
2)使用計(jì)算屬性的時(shí)候則可以和數(shù)據(jù)一樣使用(無需括號(hào))
3)如果使用方法定義表達(dá)式千所,則會(huì)重復(fù)調(diào)用該方法,消耗內(nèi)存蒜埋,減少性能
4)使用計(jì)算屬性的話可有效避免第三條出現(xiàn)的情況真慢,該表達(dá)式在計(jì)算屬性中只會(huì)請(qǐng)求一次
5)計(jì)算屬性適用于:
當(dāng)某個(gè)新數(shù)據(jù)是依賴于某一些原始數(shù)據(jù)計(jì)算得到的,這時(shí)候就該新數(shù)據(jù)應(yīng)該用計(jì)算屬性定義
只有原始數(shù)據(jù)不發(fā)生變化理茎,不管使用了多少次計(jì)算數(shù)據(jù)黑界,該計(jì)算屬性的方法只會(huì)調(diào)用一次
只有當(dāng)所依賴的原始數(shù)據(jù)發(fā)生變化時(shí),計(jì)算屬性的方法才重新調(diào)用
*/
</script>
</body>
</html>