vue 数据刷新但 dom层不刷新问题-白红宇

vue 数据刷新但 dom层不刷新问题

阅读量：724 次

发布时间：2019-03-21

本文共 780 字，大约阅读时间需要 2 分钟。

我遇到了一个 Vue.js 开发中的问题，具体描述如下：

在使用 Vue.js 和 Element UI 开发一个动态渲染数据的页面时，发现点击一个加号按钮后，旁边的数字没有及时更新。虽然数据变量确实修改了，但 DOM 并没有相应地反映出变化。经过检查，发现计数器中的数据确实被更新，但 DOM 没有更新。尝试多次使用 $set 数据绑定方法后，发现每次操作后页面无法继续交互，页面卡顿严重。最终决定使用 $nextTick 手动触发刷新，但也出现了类似问题。

经过深入分析，问题根源在于虽然数据被修改了，但 DOM 层面上并没有被通知到数据的变化，导致 UI 没有更新。数据的变化未能正确反映到 DOM 中，影响了用户体验。

总结解决方法：

深拷贝数据：通过将数据进行深拷贝，可以确保 shallowCopy 后的数据与原数据有差异，从而让 Vue 识别到数据的变动，触发 DOM 更新。使用以下代码进行深拷贝：

this.list = JSON.parse(JSON.stringify(this.list))

手动触发 DOM 更新：使用 Vue.nextTick() 在数据修改后手动触发 DOM 更新。确保在数据修改后，DOM 收到通知并及时刷新：

this.$nextTick(() => {  this.list = JSON.parse(JSON.stringify(this.list))})

强制刷新 DOM：在某些情况下，使用 this.$forceUpdate() 可以强制重绘 DOM，但需谨慎使用，以免影响性能：

this.$forceUpdate()

结论：数据的变化已经被正确识别，但 DOM 未能及时更新。通过深拷贝数据或手动触发 DOM 更新，可以解决这个问题。建议优先使用深拷贝的方法，因为它更加稳定，且不会导致性能问题。

转载地址：http://dsfgz.baihongyu.com/

你可能感兴趣的文章

MySQL 用 limit 为什么会影响性能？有什么优化方案？