记录Vue2的computed属性的一处疑惑

直接上代码,我这个cur属性是依赖list和kind

computed: {
    cur(){
      return this.list[this.kind];
    }
  },

其中,data中初始化list是空对象,kind为空字符串,那么发送请求后数据存储在resArr中,通过module将list变成对象数组

for(let i = 0; i < resArr.length; i++){
      if(!this.list[resArr[i].module]){
      	this.list[resArr[i].module] = []
      }
      this.list[resArr[i].module].push(resArr[i])
    }

更新后list从空对象变成数据结构为:

list:{
food: [obj1, obj2, ...],
car: [obj3, obj4, ...]

那么之后将kind与list中key比较

// kind更新一定要放在list后,computed加载阶段位于bc - c 所以在created阶段
    // 先更新list使其存在数据,再更新kind
    this.kind = this.prop.child[0].child[0]

这时比如kind的值为food
那么此时cur即this.list[this.kind]则为list[food],此时cur便从空数组变成数组[obj1, obj2, …],那么疑惑的点是如果我先更新kind再更新list,那么cur就不会更新,依然是空数组,只有当list存在相应的key -> value对后再更新kind值cur才会触发更新

所以这就是我疑惑的点了,为什么cur依赖list和kind两个属性,按理说是随便一个变化那么都会触发cur的变化,但是这里竟然存在顺序决定触发与否的问题,确实是自己基础不牢,特此记录避免再犯


更新一下:我猜测由于list是引用对象类型,而computed底层其实也是通过Object.defineProperty的getter和setter实现的, 所以list里面新添加的属性是无法被监听的(需要通过$set绑定),所以虽然list改变,但不发生响应

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值