Vue响应式原理踩坑

旧巷老猫 提交于 2020-03-07 13:56:04

同事遇到了一个视图层未更新的问题,操作是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等一系列操作,注意这些增删改的数据 都必须是未被响应过的数据,否则不会处理。
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!