vue的watch深度监听对象监听vuex对象等

由于对象是引用类型地址,修改对象属性 watch正常不会监听到
值类型和引用类型的区别#
(1)值类型:
1、占用空间固定,保存在栈中(当一个方法执行时,每个方法都会建立自己的内存栈,在这个方法内定义的变量将会逐个放入这块栈内存里,随着方法的执行结束,这个方法的内存栈也将自然销毁了。因此,所有在方法中定义的变量都是放在栈内存中的;栈中存储的是基础变量以及一些对象的引用变量,基础变量的值是存储在栈中,而引用变量存储在栈中的是指向堆中的数组或者对象的地址,这就是为何修改引用类型总会影响到其他指向这个地址的引用变量。)
2、保存与复制的是值本身
3、使用typeof检测数据的类型
4、基本类型数据是值类型
(2)引用类型:

1、占用空间不固定,保存在堆中(当我们在程序中创建一个对象时,这个对象将被保存到运行时数据区中,以便反复利用(因为对象的创建成本通常较大),这个运行时数据区就是堆内存。堆内存中的对象不会随方法的结束而销毁,即使方法结束后,这个对象还可能被另一个引用变量所引用(方法的参数传递时很常见),则这个对象依然不会被销毁,只有当一个对象没有任何引用变量引用它时,系统的垃圾回收机制才会在核实的时候回收它。)
2、保存与复制的是指向对象的一个指针
3、使用instanceof检测数据类型
4、使用new()方法构造出的对象是引用型

  watch: {
    
    
    '$store.state.initQuery':{
    
    
        // 立即监听
      immediate: true,
      // 深度监听
      deep: true,
      handler(val){
    
    
        console.log('ewqqweeqw',val);
      }
    }
  },
 checked: {
    
    
        sos: true,
        blood: true,
        heartRate: true,
        temperature: true,
      },
      
  watch: {
    
    
    checked: {
    
    
      handler(newValue) {
    
    
        this.handlerShow(newValue);
      },
      deep: true,
    },
  },
      /**
     * 判断显示什么
     * 传 this.checked
     */
    handlerShow(newValue) {
    
    
      this.alarmList = [];
      if (newValue.sos) {
    
    
        this.alarmList.push(...this.sosAlarmList);
      }
      if (newValue.heartRate) {
    
    
        this.alarmList.push(...this.heartAlarmList);
      }
      if (newValue.blood) {
    
    
        this.alarmList.push(...this.oxyAlarmList);
      }
      if (newValue.temperature) {
    
    
        this.alarmList.push(...this.temperatureList);
      }
    },

deep:true,是深度监听,handler是固定这么写的函数。

留给自己的话:当后端返回不同类型的list的时候,在变量新增一个newlist,点击之后给这个newlist赋不同的值,这样有数据可展示 ,无数据不展示,解决同一个大list,不同选项,暂无数据无法处理问题。
2.也可以这样在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_38594056/article/details/117119561
今日推荐