使用watch监听对象里面值的变化

watch监听对象里面值的变化

后台管理有时候有选择选择框的不同选项，会影响下一个选择框的内容，如下图

 .这个时候就可以用到watch监听

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: '原创作品'
     },{
       worksRegion:"1",
       label: "首页大IP"
     },
       {
         worksRegion:"3",
         label: "盲盒"
       }
     ],
     options5: [{
       worksRegion: '0',
       label: '原创作品'
     },{
       worksRegion:"1",
       label: "首页大IP"
     },{
         worksRegion:"2",
         label: "官方藏品"
       },
       {
         worksRegion:"3",
         label: "盲盒"
       }
     ],
     options6:[],

queryParams:{
       id:"",
       orderType:'',//1 正常订单(首次出售), 2 挂售订单(二次及以上挂售)
       worksRegion:"",// 0 原创 1 平台首发 2 官方藏品 3 盲盒
     },
     getorderType:"",
     getworksRegion:"",
   };
 },

3.watch监听

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

重点监听对象的形式为

  watch:{
    'queryParams.orderType':function (newName,oldName){//newName 新数据 oldName 老数据
      
    }
  },

对以上例子和代码进行理解，就可以理解watch监听对象里的值的变化。

watch如何深度监听对象变化

深度监听

• handler：其值是一个回调函数。监听到变化时应该执行的函数。

• deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）

• immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时需要deep属性对对象进行深度监听

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

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

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

上面的视图里 之所以刷新马上就执行了 handler函数，就是因为设置了 immediate 属性为 true

来源：https://blog.csdn.net/m0_58565372/article/details/125886702