Vue 計(jì)算屬性與監(jiān)聽器
在開發(fā)過(guò)程中，我們可能會(huì)遇到這樣的需求：
- 當(dāng)你有兩個(gè)或更多的數(shù)據(jù)，你并不希望把他們?nèi)苛_列顯示出來(lái)疆偿，那樣代碼看起來(lái)很冗長(zhǎng)。
- 而是需要經(jīng)過(guò)一些計(jì)算搓幌、處理最后整合成為一個(gè)完整的數(shù)據(jù)結(jié)果杆故，并且當(dāng)組成因子的數(shù)據(jù)值改變時(shí)，它也可以隨之動(dòng)態(tài)變化溉愁。
下面我們看一個(gè)例子：
<div id="root">
姓：<input v-model="firstName"/>
<br>
名：<input v-model="LastName"/>
<div id='show'> </div>
</div>
在 #show div元素中处铛，我想要顯示此人的全名，也就是包含他的姓和名拐揭。
那么這樣好嗎撤蟆？
<div id='show'> {{ firstName }} {{ LastName }} </div>
就像上面提到的，我不希望只是單純的通過(guò)文字的羅列來(lái)實(shí)現(xiàn)堂污，而是通過(guò)數(shù)據(jù)的整合家肯。
可想而知，全名至少需要一步字符串的連接操作敷鸦。
使用 data 和 method 屬性可能會(huì)寫得很復(fù)雜息楔，所以在此處我們引入一個(gè)新的知識(shí)點(diǎn)：計(jì)算屬性
計(jì)算屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 計(jì)算屬性與監(jiān)聽器 </title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model="firstName"/>
<br>
名：<input v-model="LastName"/>
<div>{{ fullname }}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
LastName: ''
},
computed: {
fullname: function (){
return this.firstName + ' ' + this.LastName
}
}
})
</script>
</body>
</html>
- 在此處需要注意的是計(jì)算屬性中的數(shù)據(jù) fullname 也仍是 Vue 實(shí)例對(duì)象的成員變量，和 firstName扒披、LastName 是同等地位哦值依！
- computed：如果計(jì)算因子沒有發(fā)生變化，則計(jì)算屬性對(duì)象的值是最后一次的緩存結(jié)果碟案，而不是重新計(jì)算愿险。
監(jiān)聽器
如果我們想設(shè)置一個(gè)計(jì)數(shù)器，每次我們的 input 標(biāo)簽有內(nèi)容輸入价说，發(fā)生改變時(shí)辆亏，就計(jì)數(shù) +1 ：...
<div id="root">
姓：<input v-model="firstName"/>
<br>
名：<input v-model="LastName"/>
<div>{{ fullname }}</div>
<div>
Count：{{ cnt }}
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: '',
LastName: '',
cnt: 0
},
computed: {
fullname: function (){
return this.firstName + ' ' + this.LastName
}
},
watch: {
fullname: function (){
this.count ++
}
}
})
</script>
- 監(jiān)聽器指的是去偵測(cè)某個(gè)數(shù)據(jù)，一旦它發(fā)生變化鳖目，監(jiān)聽器將立刻反應(yīng)扮叨，程序員則可以在此時(shí)寫入業(yè)務(wù)邏輯。
- Vue 實(shí)例對(duì)象中的 watch 屬性即是監(jiān)聽器领迈。
