vue2.0 watch里面的 deep和immediate的使用方法

這篇文章運(yùn)用簡單易懂的例子給大家介紹vue2.0 watch里面的 deep和immediate的使用方法，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

deep，默認(rèn)值是 false，代表是否深度監(jiān)聽。

immediate:true代表如果在 wacth 里聲明了之后，就會(huì)立即先去執(zhí)行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會(huì)在綁定的時(shí)候就執(zhí)行。

computed: {
 btnObj() {
 const { sign_img, check } = this
 return {
  sign_img,
  check
 }
 }
},
watch: {
 btnObj: {
 handler: function(newVal,oldVal) {
  if(!!this.sign_img && this.check){
  this.submit_flag = true
  this.sign_flag = '1'
  }else{
  this.submit_flag = false
  this.sign_flag = '0'
  }
 },
 deep: true,
 immediate: true
 }
}

補(bǔ)充知識(shí)：在vue中使用watch監(jiān)測數(shù)據(jù)改變的deep:true,和immediate:true

在項(xiàng)目中，有時(shí)候檢測一個(gè)變量的值是否反升了變化。通常使用的watch或者使用低效的循環(huán)判斷。

在次vue
中給我們設(shè)置了深度監(jiān)測數(shù)據(jù)繁盛變化的方法。

1.vue中提供了在watch監(jiān)聽時(shí)設(shè)置deep:true 就可以實(shí)現(xiàn)對對象的深度監(jiān)聽;

2.immediate:true,代表watch里面聲明了之后會(huì)立馬執(zhí)行handler里面的函數(shù)。

這是一個(gè)使用vuex中的一個(gè)數(shù)據(jù)，settingData.在實(shí)際中要檢測其值發(fā)生改變之后要讓一個(gè)button按鈕的disabled屬性移除。我們可以使用類似的方式，但是這樣寫的時(shí)候必須使用handler函數(shù)。

還有immediate:true,代表watch里面聲明了之后會(huì)立馬執(zhí)行handler里面的函數(shù)。執(zhí)行相應(yīng)的邏輯。

如果不設(shè)置這些屬性可以使用循環(huán)的方式。

1.若是檢測的是對象，使用循環(huán)的時(shí)候可以將其轉(zhuǎn)換成數(shù)組。（簡單的對象處理）

1.使用Object.keys(obj)將其對象中的key拿出來放進(jìn)一個(gè)數(shù)組中

a.for...in...

b.[].slice.call(object)

2.然后使用循環(huán)將對相應(yīng)的值存儲(chǔ)在另一個(gè)數(shù)組中。

3.然后根據(jù)業(yè)務(wù)邏輯處理相應(yīng)的數(shù)組

2.使用es6語法糖的方式

1.數(shù)組轉(zhuǎn)對象

2.對象轉(zhuǎn)數(shù)組

Array.from(object)

關(guān)于vue2.0 watch里面的 deep和immediate的使用方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。