Vue响应式原理踩坑

同事遇到了一个视图层未更新的问题,操作是onLoad时从store中取出storeList,对storeList forEach操作新增属性 a,然后将更改后的storeList赋值给该组件data中的  dataList。

经检查 最后dataList中的a属性,没有setter,初以为在赋值操作时 触发 dataList的setter 后 应该重新响应式被赋值的数据,但结果没有。

思考了会,觉得是dataList只是对storeList的引用,所以要对源数据 storeList进行 $set(storeList, 'a', false)。

吃完午饭才意识到跟 引用没有半毛钱关系,既然dataList有setter了  就会重新响应式赋值 切断引用。根本原因是因为  store中拿出的storeList 已经是一个响应式数据了(在某个时机保存的),先前学vue源码时 提到,响应式时  会对每个对象包括数组 添加一个

__ob__ 属性 返回的是当前observer实例, 当触发setter的时候 要去走响应式的方法了,接着判断 这个属性有没有被响应式过(即有无__ob__ 属性),如果有的话就原样返回,没有的话就响应式普通属性再返回。 所以这里要先对源数据$set, 再赋值。 最后总结下会触发响应式的几种操作,对属性赋值,数组push pop splice等一系列操作,注意这些增删改的数据 都必须是未被响应过的数据,否则不会处理。 Vue响应式原理踩坑Vue响应式原理踩坑
上一篇:ecology8将选择框整合至输入框


下一篇:JavaScript--EventLoop + Promise + Async/Await