共计 900 个字符,预计需要花费 3 分钟才能阅读完成。
问题场景
在我的项目中须要做自定义条件筛选框,本人能够配置本人的筛选框选项。采取的做法是把筛选框封装成组件,而后记录所勾选的筛选条件存到数组外面,而后通过 v -for 把对应的筛选框渲染到页面上。数组是通过 computed 属性计算出来的。
呈现的问题
勾选或者移除某一个筛选框,通过 devtool 工具看到数组中的数据是产生了扭转,然而视图上更新的并不是咱们想要的成果。比方删除一个筛选框,视图像按着程序前一个,然而并没有按着失常的数组外面的值进行渲染。
问题解决
- 第一步,在封装的子组件的 created 函数中打印句话,判断组件是否从新渲染
- 例如一共抉择了 5 个筛选框,在第一次初始化的时候是打印了 5 次,然而我在新增一个筛选框的时候发现只打印了一次,然而按我的计划来走的话,按情理是我一个抉择了 6 个筛选框,应该依据数组,从新渲染 6,应该初始化 6 次才对。
- 察看到这个景象,我想到了之前有理解过 vue 中的组件复用的机制,而后顺藤摸瓜的去 vue 的官网文档上寻找答案。
- 果不其然,在 v -for 的介绍中提到了一个“就地更新”的机制, 回头看了我的代码,果然问题就出在这里,因为以前用 v -for 遍历的时候不存在对数组进行操作,反复渲染的问题。所以习惯性的认为用索引当做 key 的绑定值。
本次的问题就是呈现在这里,我用了索引去当做 key 进行绑定,数组发生变化了,然而索引不会变的,例如我尽管更新数组第一位的数据,然而数组第一位对应的索引仍然为 0 不会变动,那 vue 就认为这个组件不会扭转,那他就不会再去从新渲染这个组件,而是抉择了复用。这就是导致我 bug 的起因。
总结
在这解决这个问题的过程中,起初我认为问题是出在视图更新晚于数据更新,想通过 nextTick 解决,也想过通过 set 来给数组赋值。然而问题的起源是我曾经确定了数据是同步更新了,视图更新了然而更新的不正确,而不是没有更新,如果没有更新的话,应该是我新增或者删除一个组件后,视图无成果,再一次操作后才有成果,没有认真剖析问题的起因,就开始按着本人的认知开始解决问题,最初所有的形式都尝试了有效后才开始思考,缓缓靠近正确答案。
记录问题解决的过程,如果有形容有误或者不清晰的中央,欢送斧正。
正文完
发表至: javascript
2021-04-04