@TOC

遇到的問題

在深層props過程中，props的數(shù)據(jù)傳到了目標(biāo)文件 但卻沒有觸發(fā)數(shù)據(jù)更新及頁(yè)面更新；
watch代碼如下：

  watch: {
  uploaConfig(newVal,oldVal){
   if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {
        this.moreList = newVal.moreList
        }
    }
  },

vue-devToola數(shù)據(jù)傳遞結(jié)果如下

在這里插入圖片描述

方案解決過程一

考慮到使用了對(duì)象傳遞 watch可能無(wú)法檢測(cè)到深層key屬性變化，代碼改成如下:

 watch: {
     'uploaConfig.moreList': {
          handler (newVal) {
          if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {
            this.moreList = newVal.moreList
            }
          },
          deep: true
        }
    },

結(jié)果顯而易見 還是不行；

方案解決過程二

查閱: vue官方文檔.得知如果是想watch檢測(cè)到值變化并且立刻使用則需要加上 immediate: true,

watch: {
        'uploaConfig.moreList': {
          handler (newVal) {
          if (this.uploadConfig.moreList && this.uploadConfig.moreList.length > 0) {
            this.moreList = newVal.moreList
            }
          },
          deep: true,
          immediate: true,
        }
    }

最后博主問題終于得到解決了

在這里插入圖片描述

總結(jié):

出現(xiàn)問題盡量先找官網(wǎng) 首先確定是自己沒有了解到官方api的正確使用或者是一些特定解決方案，如若對(duì)您有幫助，麻煩點(diǎn)個(gè)贊吧~

20190626更新 | 原文并沒有解釋清楚為何加上 deep: true或者 immediate: true就可以了，此次更新將加入demo

更新內(nèi)容

1 常規(guī)的監(jiān)聽(watch)

<div class="watch-demo">
    <div class="watch-demo-item">
      <input type="text" v-model="val1">
      <div>{{value1}}</div>
    </div>
  </div>
// ...
data () {
    return {
      val1: '',
      value1: ''
    }
  },
  watch: {
    val1 (val, oval) {
      this.value1 = val
    }
  },
  methods: {
  }

輸出:

常規(guī)監(jiān)聽

• 從上圖可以看出，常規(guī)的監(jiān)聽和我們想象中的完全一致，理想和實(shí)際完美吻合；

2 對(duì)象監(jiān)聽

 <div class="watch-demo-item">
      <input type="text" v-model="obj.val2">
      <div>{{value2}}</div>
    </div>
// ...

data () {
    return {
      val1: '',
      value1: '',
      obj: {
        val2: ''
      },
      value2: ''
    }
  },
  watch: {
    val1 (val, oval) {
      this.value1 = val
    },
    obj (val, oval) {
      this.value2 = val.val2
    }
  },
  methods: {
  }

輸出結(jié)果:

對(duì)象監(jiān)聽

• 咦 為何剛才沒問題，對(duì)象就有問題呢

方法一: 代碼調(diào)整如下:

 data () {
    return {
      val1: '',
      value1: '',
      obj: {
        val2: ''
      },
      value2: ''
    }
  },
  watch: {
    val1 (val, oval) {
      this.value1 = val
    },
    'obj.val2' (val, oval) {
      this.value2 = val
    }
  },
  methods: {
  }

此時(shí)頁(yè)面輸出:

方法一

但現(xiàn)實(shí)開發(fā)過程中，我們的obj對(duì)象很難確定里面的key數(shù)量，假如很多個(gè)key的時(shí)候，總不能寫多個(gè)監(jiān)聽去監(jiān)聽key吧？ 此時(shí)還有一種方法 如下

方法二

data () {
    return {
      val1: '',
      value1: '',
      obj: {
        val2: ''
      },
      value2: ''
    }
  },
  watch: {
    val1 (val, oval) {
      this.value1 = val
    },
    'obj': {
      handler (val, oval) {
        this.value2 = val.val2
      },
      deep: true
    }
  },

此時(shí)輸出如下

方法二

解釋:handler是watch的高級(jí)用法,里面有一個(gè)屬性 deep，默認(rèn)值是 false，代表是否深度監(jiān)聽, 還有一個(gè)屬性 immediate，默認(rèn)值也是 false ，但immediate:true代表如果在 wacth 里聲明了之后，就會(huì)立即先去執(zhí)行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會(huì)在綁定的時(shí)候就執(zhí)行。deep深度監(jiān)聽會(huì)影響性能； 兩者可以同時(shí)存在；

此次代碼演示demo請(qǐng)轉(zhuǎn) 王一諾watchDemo.vue

如果對(duì)你有幫助麻煩點(diǎn)個(gè)贊??