使用watch監(jiān)聽對象里面值的變化

更新時間：2023年01月14日 11:14:23 作者：阿wei程序媛

這篇文章主要介紹了使用watch監(jiān)聽對象里面值的變化，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

watch監(jiān)聽對象里面值的變化

后臺管理有時候有選擇選擇框的不同選項(xiàng)，會影響下一個選擇框的內(nèi)容，如下圖

.這個時候就可以用到watch監(jiān)聽

1.樣式代碼

<div class="list">
      訂單類型:
      <el-select v-model="getorderType" placeholder="請選擇" @change="getchange">
           <el-option
                v-for="item in options1"
                :key="item.orderType"
                :label="item.label"
                :value="item.orderType">
           </el-option>
      </el-select>
</div>
<div class="list">
     操作對象:
     <el-select v-model="getworksRegion" placeholder="請選擇" @change="getchange1">
          <el-option
                v-for="item in options6"
                :key="item.worksRegion"
                :label="item.label"
                :value="item.worksRegion">
          </el-option>
     </el-select>
</div>

2.data里的代碼

  data() {
    return {
      verifyData: this.propData,
      editBoxShow: false,
      options1: [{
        orderType: '1',
        label: '首次出售'
      },{
        orderType:"2",
        label: "二次及以上掛售"
      }
      ],
      options2: [{
        worksRegion: '0',
        label: '原創(chuàng)作品'
      },{
        worksRegion:"1",
        label: "首頁大IP"
      },
        {
          worksRegion:"3",
          label: "盲盒"
        }
      ],
      options5: [{
        worksRegion: '0',
        label: '原創(chuàng)作品'
      },{
        worksRegion:"1",
        label: "首頁大IP"
      },{
          worksRegion:"2",
          label: "官方藏品"
        },
        {
          worksRegion:"3",
          label: "盲盒"
        }
      ],
      options6:[],
     
      queryParams:{
        id:"",
        orderType:'',//1 正常訂單(首次出售), 2 掛售訂單(二次及以上掛售)
        worksRegion:"",// 0 原創(chuàng) 1 平臺首發(fā) 2 官方藏品 3 盲盒
      },
      getorderType:"",
      getworksRegion:"",
    };
  },

3.watch監(jiān)聽

  watch:{
    'queryParams.orderType':function (newName,oldName){
      if(newName==1){
        this.options6 = this.options2
      }else if(newName==2){
        this.options6 = this.options5
      }
    }
  },

重點(diǎn)監(jiān)聽對象的形式為

? watch:{
? ? 'queryParams.orderType':function (newName,oldName){//newName 新數(shù)據(jù) oldName 老數(shù)據(jù)
? ? ??
? ? }
? },

對以上例子和代碼進(jìn)行理解，就可以理解watch監(jiān)聽對象里的值的變化。

watch如何深度監(jiān)聽對象變化

深度監(jiān)聽

handler：其值是一個回調(diào)函數(shù)。監(jiān)聽到變化時應(yīng)該執(zhí)行的函數(shù)。
deep：其值是true或false；確認(rèn)是否深入監(jiān)聽。（一般監(jiān)聽時是不能監(jiān)聽到對象屬性值的變化的，數(shù)組的值變化可以聽到。）
immediate：其值是true或false；確認(rèn)是否以當(dāng)前的初始值執(zhí)行handler的函數(shù)。

當(dāng)需要監(jiān)聽一個對象的改變時，普通的watch方法無法監(jiān)聽到對象內(nèi)部屬性的改變，此時需要deep屬性對對象進(jìn)行深度監(jiān)聽

watch: {
? ? obj: {
? ? ? handler(newValue, oldValue) {
? ? ? ? console.log(newValue.id);
? ? ? ? this.formData.fid = newValue ? newValue.id : 0;
? ? ? },
? ? ? deep: true,
? ? ? immediate: true
? ? }
? },

需要注意得到是 handler 是固定寫法，不能用其他的。

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

上面的視圖里之所以刷新馬上就執(zhí)行了 handler函數(shù)，就是因?yàn)樵O(shè)置了 immediate 屬性為 true