- computed也是vm的一個(gè)屬性對(duì)象
- 在computed中豺瘤，可以定義一些屬性镇饺，這些屬性叫做計(jì)算屬性异剥，計(jì)算屬性的本質(zhì)就是一個(gè)方法，只不過(guò)我們?cè)谑褂眠@些計(jì)算屬性的時(shí)候济竹，是把他們的名稱(chēng)直接當(dāng)作屬性來(lái)使用的痕檬，并不會(huì)把計(jì)算屬性當(dāng)作方法使用
- 注意事項(xiàng)
- 注意一：計(jì)算屬性在引用的時(shí)候一定不要加()去調(diào)用，直接把它當(dāng)作普通屬性去使用就好了
- 注意二：只要計(jì)算屬性function內(nèi)部所用到的任何data中的數(shù)據(jù)發(fā)生了變化送浊，就會(huì)立即重新計(jì)算這個(gè)計(jì)算屬性的值
- 注意三：計(jì)算屬性的求值結(jié)果梦谜，會(huì)被緩存起來(lái)，方便下次直接使用袭景，如果計(jì)算屬性方法中唁桩，所有來(lái)的任何數(shù)據(jù)都沒(méi)有發(fā)生過(guò)變化，則不會(huì)重新對(duì)計(jì)算屬性求值
- 代碼demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>08使用computed監(jiān)控?cái)?shù)據(jù)動(dòng)態(tài)變化</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="first"> +
<input type="text" v-model="second"> =
<input type="text" v-model="full">
<p></p>
{{ full }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
first: '',
second: '',
},
method:{},
computed:{
full(){ //full方法名會(huì)被當(dāng)做data屬性來(lái)使用耸棒，并且first和second有任何變化都會(huì)調(diào)用full方法更新數(shù)據(jù)
console.log('11111') //用來(lái)測(cè)試full值發(fā)生變化只會(huì)計(jì)算一次荒澡，頁(yè)面其他地方使用的時(shí)候直接從緩存里讀取
return this.first + "----" + this.second
}
}
})
</script>
</body>
</html>
- method，watch和computed的區(qū)別：
- computed屬性的結(jié)果會(huì)被緩存与殃，除非依賴(lài)的響應(yīng)式屬性變化才會(huì)重新計(jì)算单山，主要當(dāng)作屬性來(lái)使用
- methods方便表示一個(gè)具體的操作，主要書(shū)寫(xiě)業(yè)務(wù)邏輯
- watch一個(gè)對(duì)象幅疼，鍵是需要觀(guān)察的表達(dá)式米奸，值是對(duì)應(yīng)回調(diào)函數(shù)。主要用來(lái)監(jiān)聽(tīng)某些待定數(shù)據(jù)的變化爽篷，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作悴晰；可以看做是computed和methods的結(jié)合體
