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为什么监听不到数组或者对象的改变,可以看我面试宝典专栏的文章,有详解

  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论

打赏作者

前端老实人

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值