博客
关于我
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))
    1. 手动触发 DOM 更新:使用 Vue.nextTick() 在数据修改后手动触发 DOM 更新。确保在数据修改后,DOM 收到通知并及时刷新:
    2. this.$nextTick(() => {  this.list = JSON.parse(JSON.stringify(this.list))})
      1. 强制刷新 DOM:在某些情况下,使用 this.$forceUpdate() 可以强制重绘 DOM,但需谨慎使用,以免影响性能:
      2. this.$forceUpdate()

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

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

    你可能感兴趣的文章
    Mysql学习总结(60)——并发量大、数据量大的互联网业务数据库设计规范总结
    查看>>
    Mysql学习总结(61)——MySQL优化之DBA级优化整理汇总
    查看>>
    Mysql学习总结(62)——MySQL连接com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link问题
    查看>>
    Mysql学习总结(63)——Mysql数据库架构方案选择与分析
    查看>>
    Mysql学习总结(64)——Mysql配置文件my.cnf各项参数解读
    查看>>
    Mysql学习总结(65)——项目实战中常用SQL实践总结
    查看>>
    Mysql学习总结(66)——设置MYSQL数据库编码为UTF-8
    查看>>
    Mysql学习总结(67)——MYSQL慢查询日志
    查看>>
    Mysql学习总结(68)——MYSQL统计每天、每周、每月、每年数据 SQL 总结
    查看>>
    Mysql学习总结(69)——Mysql EXPLAIN 命令使用总结
    查看>>
    Mysql学习总结(6)——MySql之ALTER命令用法详细解读
    查看>>
    Mysql学习总结(70)——MySQL 优化实施方案
    查看>>
    Mysql学习总结(71)——MySQL 重复记录查询与删除总结
    查看>>
    Mysql学习总结(71)——数据库介绍(MySQL安装 体系结构、基本管理)再回顾
    查看>>
    Mysql学习总结(72)——MySQL 开发者开发,设计规范再总结
    查看>>
    Mysql学习总结(73)——MySQL 查询A表存在B表不存在的数据SQL总结
    查看>>
    Mysql学习总结(74)——慢SQL!压垮团队的最后一根稻草!
    查看>>
    Mysql学习总结(75)——并发量大、数据量大的互联网业务数据库设计军规
    查看>>
    Mysql学习总结(76)——MySQL执行计划(explain)结果含义总结
    查看>>
    Mysql学习总结(77)——温故Mysql数据库开发核心原则与规范
    查看>>