vue监听不到数组和对象的改变

需求：多选框需要动态改变背景色

一、数组

1、可以监听到的情况

如push、splice、=赋值（array=[1,2,3]）

2、无法监听到的情况

使用下标修改某个元素（这种比较常见）

array[index] = 1

object.a = 3

直接修改数组length

array.length = 5

解决方案

利用临时变量进行中转

 <div
          v-for="(i, index) in list"
          :key="index"
          @click="onTab(index)"
          :class="{ active: listActive[index] }"
          class="bac"
        >
          <img v-if="listActive[index]" src="../../assets/images/jiaobiao.png" alt="" srcset="" />
          <div style="font-size: 18px">{{ i.title }}</div>
          <div>{{ i.num }}</div>
        </div>
<script>
  onTab(e) {
      let listActive2 = [...this.listActive];
      listActive2[e] = !listActive2[e];
      this.listActive = listActive2;
      this.$emit('listActive',this.listActive)
    },
</script>

二、对象

对象和数组都是js里的引用类型，在实际存储中，数据是存储在堆中的，利用存储在栈里的对象名或者数组名的指针进行索引，因此也存在在浅拷贝和深拷贝以及等号赋值时，到底是仅仅新建了一个指针指向了同一份数据，还是两个指针分别指向了两份完全一样的数据的问题

1、可以监听到的

对象的直接=赋值

this.obj = {name: 'test'}

2、无法监听到的

obj: {
  prop1: 'data1',
  prop2: 'data2'
}
...
// 增
this.obj.prop3 = 'data3'
// 删
delete this.obj.prop1
// 改
this.obj.prop1 = 'data4'

解决方案

this.$set(obj, key ,value)// - 可实现增、改
//watch时添加deep：true深度监听，只能监听到属性值的变化，新增、删除属性无法监听
this.$watch('blog', this.getCatalog, {
  deep: true
  // immediate: true // 是否第一次触发
 });
//watch时直接监听某个key
watch: {
 'obj.name'(curVal, oldVal) {
  // TODO
 }
}
//object.assign()+直接=赋值
this.watchObj = Object.assign({}, this.watchObj, {
 name: 'xiaoyue',
 age: 15,
});

至于vue为什么监听不到数组或者对象的改变，可以看我面试宝典专栏的文章，有详解