Watch的使用場(chǎng)景
1，主要任務(wù)就是監(jiān)控變量的變化，一個(gè)數(shù)據(jù)影響多個(gè)數(shù)據(jù)
watch的特點(diǎn)：
1.當(dāng)變量變化時(shí)調(diào)用函數(shù)
2.如果不設(shè)置immediate則在初始綁定值時(shí)不會(huì)執(zhí)行
watch有兩個(gè)選項(xiàng)：
1.deep選項(xiàng)：表示深層遍歷，當(dāng)需要監(jiān)控對(duì)象內(nèi)部值的變化時(shí)，可以在選項(xiàng)參數(shù)中指定 deep: true。注意監(jiān)聽數(shù)組的變動(dòng)不需要這么做
2.immediate選項(xiàng)：如果在選項(xiàng)參數(shù)中指定 immediate: true，將立即觸發(fā)監(jiān)控中變量的函數(shù)（如果我們需要在最初綁定值的時(shí)候也執(zhí)行監(jiān)控函數(shù)，就需要用到immediate屬性）
一，在vue中基本用法
<p>FirstName: <input type="text" v-model="firstName"></p>
data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? firstName: 'Dawei',
? ? ? ? ? ? }
? ? ? ? },
Watch:{
//firstName是data的return返回對(duì)象中的數(shù)組變量，newName是屬性變化后的值，oldName是屬性變化前的值
firstName(newName, oldName) {
? ? ? ? ? // this.fullName = newName + ' ' + this.lastName;
? ? ? ? ? console.log(newName)
? ? ? ? ? console.log(oldName)
? ? ? ? },
}
二，使用 immediate和handler
使用場(chǎng)景：
當(dāng)值第一次綁定的時(shí)候，不會(huì)執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會(huì)執(zhí)行
當(dāng)父組件向子組件動(dòng)態(tài)傳值時(shí)，子組件props首次獲取到父組件傳來的默認(rèn)值時(shí)，也需要執(zhí)行函數(shù)，此時(shí)就需要將immediate設(shè)為true
firstName:{
? ? ? ? ? handler(newName, oldName){
? ? ? ? ? ? console.log(newName)
? ? ? ? ? ? console.log(oldName)
? ? ? ? ? },
? ? ? ? ? immediate: true
? ? ? ? }
監(jiān)聽的數(shù)據(jù)后面寫成對(duì)象形式，包含handler方法和immediate，之前我們寫的函數(shù)其實(shí)就是在寫這個(gè)handler方法；
immediate表示在watch中首次綁定的時(shí)候，是否執(zhí)行handler，值為true則表示在watch中聲明的時(shí)候，就立即執(zhí)行handler方法，值為false，則和一般使用watch一樣，在數(shù)據(jù)發(fā)生變化的時(shí)候才執(zhí)行handler。
三，deep
當(dāng)需要監(jiān)聽一個(gè)對(duì)象的改變時(shí)，普通的watch方法無法監(jiān)聽到對(duì)象內(nèi)部屬性的改變，只有data中的數(shù)據(jù)才能夠監(jiān)聽到變化，此時(shí)就需要deep屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽。
? firstName:{
? ? ? ? ? handler(newName, oldName){
? ? ? ? ? ? console.log(newName)
? ? ? ? ? ? console.log(oldName)
? ? ? ? ? },
? ? ? ? ? deep: true,
? ? ? ? ? immediate: true
? ? ? ? }
