Vue進(jìn)階(八十九):Vue中watch用法

2019-12-28    seo達(dá)人

在Vue中,用watch來響應(yīng)數(shù)據(jù)的變化,示例代碼如下,



第一種方式

<input type="text" v-model="userName"/>  

//監(jiān)聽當(dāng)userName值發(fā)生變化時(shí)觸發(fā)

watch: {

userName (newName, oldName) {

console.log(newName)

}

}



第一種方式有一個(gè)缺點(diǎn): 就是當(dāng)值第一次綁定的時(shí)候 不會執(zhí)行監(jiān)聽函數(shù),只有當(dāng)值改變的時(shí)候才會執(zhí)行。



如果我們想在第一次綁定的時(shí)候執(zhí)行此監(jiān)聽函數(shù),則需要設(shè)置immediate為true。比如當(dāng)父組件向子組件動(dòng)態(tài)傳值時(shí),子組件props首次獲取到父組件傳來的默認(rèn)值時(shí),也需要執(zhí)行函數(shù),此時(shí)就需要將immediate設(shè)為true。



第二種方式

watch: {

userName: {

handler (newName, oldName) {

console.log(newName)

},

immediate: true

}

}



immediate表示在watch中首次綁定的時(shí)候,是否執(zhí)行handler,值為true則表示在watch中聲明的時(shí)候,就立即執(zhí)行handler方法,值為false,則和一般使用watch一樣,在數(shù)據(jù)發(fā)生變化的時(shí)候才執(zhí)行handler。



當(dāng)需要監(jiān)聽一個(gè)對象的改變時(shí),普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的改變,只有data中的數(shù)據(jù)才能夠監(jiān)聽到變化,此時(shí)就需要deep屬性對對象進(jìn)行深度監(jiān)聽。



第三種方式

<input type="text" v-model="cityName.name" />

data (){

return {

cityName: 

{

name:'北京',

location: '中國'

}

}

},

watch: {

cityName: {

handler(newName, oldName) {

console.log(newName)

},

immediate: true,

deep: true

}

}



注:監(jiān)測為對象的時(shí)候,newVal == oldVal



此時(shí)會給cityName的所有屬性都加上監(jiān)聽函數(shù),如果屬性較多時(shí),每個(gè)屬性值的變化都會執(zhí)行handler。如果只需要監(jiān)聽對象中的一個(gè)屬性值,則可以做以下優(yōu)化:使用字符串的形式監(jiān)聽對象屬性:



watch: {

'cityName.name': {

handler(newName, oldName) {

console.log(newName)

},

immediate: true,

deep: true

}

}



數(shù)組的變化不需要深度監(jiān)聽;

在watch中不要使用箭頭函數(shù),因?yàn)榧^函數(shù)中的this是指向當(dāng)前作用域.




日歷

鏈接

個(gè)人資料

存檔