運(yùn)用場(chǎng)景
當(dāng)項(xiàng)目中某個(gè)值發(fā)生變化時(shí)缚去，想執(zhí)行對(duì)應(yīng)的方法或者時(shí)刻獲取最新的值羞酗，此時(shí)就需要用到watch方法
常規(guī)用法
當(dāng)值發(fā)生變化直接執(zhí)行定義在methods中的方法摧找，這種寫(xiě)法，只有當(dāng)值value發(fā)生變化時(shí)崭参，才會(huì)執(zhí)行方法呵曹，第一次默認(rèn)綁定值時(shí)不會(huì)執(zhí)行changeValue函數(shù)；
data(){
return{
value:''
}
}
? watch:{
? ? ? value:'changeValue'
? ? },
? methods:{
? ? changeValue(){
? ? ? console.log('當(dāng)value值發(fā)生變化時(shí)執(zhí)行這個(gè)方法')
? ? }
? }
data(){
return{
value:''
}
}
? watch:{
? ? ? value:'changeValue'
? ? },
? methods:{
? ? changeValue(){
? ? ? console.log('當(dāng)value值發(fā)生變化時(shí)執(zhí)行這個(gè)方法')
? ? }
? }
2.使用immediate和handler方法何暮，如果不寫(xiě)immediate屬性，則跟第一種寫(xiě)法一樣,value綁定默認(rèn)值第一次不會(huì)執(zhí)行铐殃，當(dāng)加上immediate=true時(shí)海洼，此時(shí)watch對(duì)value的默認(rèn)值也進(jìn)行了監(jiān)聽(tīng)，在初始綁定值時(shí)也執(zhí)行下面的方法
data(){
return{
value:''
}
}
? watch:{
? ? ? 'value':{
? ? ? immediate: true,
handler(newValue,oldValue){
this.changeValue();
}
}
? ? },
? methods:{
? ? changeValue(){
? ? ? console.log('當(dāng)value值發(fā)生變化時(shí)執(zhí)行這個(gè)方法')
? ? }
? }
data(){
return{
value:''
}
}
? watch:{
? ? ? 'value':{
? ? ? immediate: true,
handler(newValue,oldValue){
this.changeValue();
}
}
? ? },
? methods:{
? ? changeValue(){
? ? ? console.log('當(dāng)value值發(fā)生變化時(shí)執(zhí)行這個(gè)方法')
? ? }
? }
3.深度監(jiān)聽(tīng)富腊，有時(shí)候會(huì)遇到當(dāng)value是個(gè)對(duì)象時(shí)坏逢，有多層數(shù)據(jù)結(jié)構(gòu)，當(dāng)下面層級(jí)的屬性發(fā)生變化時(shí)赘被，普通寫(xiě)法watch是監(jiān)聽(tīng)不到變化是整，這時(shí)需要加上deep屬性；
data(){
return{
value:''
}
}
? watch:{
? ? ? 'value':{
? ? ? immediate: true,
? ? ? deep: true,
? handler(newValue,oldValue){
this.changeValue();
? }
}
? ? },
? methods:{
? ? changeValue(){
? ? ? console.log('當(dāng)value值發(fā)生變化時(shí)執(zhí)行這個(gè)方法')
? ? }
? }
data(){
return{
value:''
}
}
? watch:{
? ? ? 'value':{
? ? ? immediate: true,
? ? ? deep: true,
? handler(newValue,oldValue){
this.changeValue();
? }
}
? ? },
? methods:{
? ? changeValue(){
? ? ? console.log('當(dāng)value值發(fā)生變化時(shí)執(zhí)行這個(gè)方法')
? ? }
? }
watch不僅僅只監(jiān)聽(tīng)頁(yè)面內(nèi)定義的值的變化民假，還能監(jiān)聽(tīng)props浮入、vuex中狀態(tài)值的變化。
