关于vue数据不显示及页面刷新二三事_vue后台反的数据,怎么都回显不到页面上来,数据也没问题,也没报错-优快云博客

本文链接：https://blog.youkuaiyun.com/class_zy/article/details/118366702

在使用Vue和Element-UI时遇到数据不回显和视图未更新的问题，虽然网上常见解决办法是因数据层级过深，但实际情况并非如此。通过检查数据绑定和输出，发现直接置空对象会导致数据的get和set方法丢失，从而无法更新视图。使用`this.$forceUpdate()`可以强制刷新页面，但会影响性能并违背Vue的虚拟DOM理念，因此不推荐频繁使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天,在写vue使用element-ui时遇到了一个奇怪的问题,数据不回显,并且不论是input框还是select框都无法显示数据,并且在change事件输出时,发现数据已经赋值成功,但是并未更新到视图层.
于是在百度中寻找答案,没想到还真有很多小伙伴都是这样的情况,很多都说是因为数据层级过深,导致数据更新无法监听到数据的变化,就无法看到数据回显需要加以下代码.

this.$forceUpdate()

尝试之后,真的成功了.但是,真的是因为数据层级的原因吗?我在其他地方使用的也是这样的数据结构,而且数据嵌套也只有两层,其他地方是都可以成功的,那么很显然不是数据层级的问题.于是我询问了我五年后端的兄弟(有个老程序员的兄弟就是爽),他让我把绑定的数据输出一下,于是问题就很显然的出现了.

首先先说明一下代码前提

const AdUrlFrom = { //首先在export defualt 外部定义这个表单的数据模板
  linkType: 0,
  nameCn: '',
  nameEn: '',
  id: '',
  url: '',
  product: [],
  linkContentType: 0
}

// 在 data中 声明出该数据,并且通过Object.assign归并之前默认模板
data: {
  return {
    AdUrlFrom: Object.assign({}, AdUrlFrom),
  }
}
在之后的一个方法中我对这个数据进行了置空的操作
this.AdRulFrom = {} // 就是这一步,就是罪恶的开始
置空之后在对这个对象进行其他操作
我们先来看一下之后之后输出的这个对象

在这里插入图片描述

后面我们再来看一下通过这种方式进行置空的对象
 this.AdUrlFrom = Object.assign({}, AdUrlFrom)

在这里插入图片描述
到这里我们就可以很明显的看到问题所在了,通过直接置空的方式会将原型链上面对象的get和set方法都清除,

而没有了这两个方法自然无法将数据更新到视图层,这也就出现了我们之前的现象,输入后数据数据无显示.

而使用this.$forceUpdate()将页面重新渲染就将这两个方法重新添加进去(或许并没有添加进去,只是将数据重新渲染进页面,我这里并没有做实验,不能误人子弟,欢迎知道具体实现的兄弟在评论区告诉我一下😂)

最后一个很重要的一点,this.$forceUpdate()会很消耗性能 (点一下刷新一下会被玩坏的), 这样也使得vue的虚拟dom失去了意义,所以并不建议使用刷新页面的方法.

就酱,完结