文章目录
- 数据处理代码片段 🌰 大概举例
- 原因
- 解决方法 - 深拷贝
- forceUpdate - 强制更新
今天遇到了checkbox不更新的问题,相同的功能在其他地方正常使用,有些地方不能用。
数据处理代码片段 🌰 大概举例
从现有数据中过滤出新的数据,并且添加 selected 属性

原因
数据来源 / 浅拷贝 都会导致这个问题。
以上代码中处理数据后 直接赋值到 this.tableList 中,vue 只会将this.tableList指向filterData,并不会对这段数据添加响应式处理,所以修改数据时,修改的还是原数据。
(不添加响应式大概是因为:原数据是从 vue 的data中过滤出来的,filter方法并不会生成一个新的数组。 我理解不一定正确,仅供参考)
浅拷贝原因同上。
如果数据是从接口查询后直接处理的,可以直接赋值。
解决方法 - 深拷贝
将
this.tableList = filterData
修改为
this.tableList = JSON.parse(JSON.stringify(filterData))
注意: 由于数据结构是 数组对象 格式,这里不能使用扩展运算符进行拷贝。否则数组中对象还是指向原数据。
forceUpdate - 强制更新
虽然很多此类情况都能使用 this.$fourceUpdate() 解决 ,但频繁使用会影响性能。
考虑性能的情况下不建议使用。
如非迫不得已 不建议使用。
不是所有地方都有 forceUpdate, 还是要学会自己找到问题原因,通过优化代码逻辑来解决问题。
![MySQL学习[4] ——MySQL锁](https://i-blog.csdnimg.cn/direct/d214bba819d8460eb4b4ed5436e15389.png)


















