Vue3数据更新,页面没有同步更新的问题及解决
数据更新,页面没有同步更新
情景
页面中的列表需要渲染接口返回的数据
问题
根据控制台中打印的结果来看，接口数据请求且存储成功，但是页面列表中仍无数据，且控制台中无报错
解决方法
刚开始是将接口数据直接存储在数组中的，在网上查找了相关问题后，将数组包裹在一个响应式对象中
如下图所示，问题成功解决，暂时不明白其中原理。
数据不同步的排查记录
我遇到了一个vue异步获取数据后视图没有更新的问题，排查了很久很久，最后才发现自己踩在了一个自己万万没有想到的坑上，所以记录一下。
常见的解决方案
关于vue数据不同步的排查已经有很多类似的博客了，一般而言，原因有一下几点：
- 数据没有设置成功
- 设置的数据不是响应式的
- 设置的数据和视图上的变量不是同一个，可能设置错了变量
既然写到类似话题，我也罗列一下相关的解决方案：
使用this.$set()，
可以尝试类似this.data=JSON.parse(JSON.stringify(data))去排查是不是数据劫持的问题。
这个我一个同事遇到过一次，他发现他的变量里面部分属性没有设置get/set（就是没有被vue监听到，所以无法响应式），原因大概是他在原变量上加了新属性，但是没有被vue监听到。这是一个很有迷惑性的例子，
大家可以看看下面的代码：
这里其实是希望属性b可以被监听到的，所以尝试重新给this.data赋值，但是很遗憾，const data的引用和this.data是同一个，this.data = data并不能实现变量的覆盖（因为vue只有变量和之前不同才会对变量里面的所有属性做劫持，同一个引用，vue不会对新属性进行监听）
// 例子
// 假设已经有一个data
{
data(){
return {
data:[{a:1}]
}
},
created(){
/* 在这里其实我们是希望将变量覆盖的 */
const data = this.data
data[0].b = 1
this.data = data
}
}
可以看大以下输出，可以看到a属性是有get和set的，即他们已经是响应式的了，但是b却没有get/set。
使用this.data=JSON.parse(JSON.stringify(data))的原理实际上就是为了创建一个新的对象重新赋值。
- 如果还是不行，要仔细检查变量有没有设置成功，可以通过vue的Devtools工具查看，或者直接输出到控制台里面查看。有可能是this等的指向不对或者是拼写错误导致变量赋值失败
- 还要看看视图里面的变量和你所希望更新的变量是不是同一个，会不会是视图里面的变量写错了
- 其他的方法还包括:重启以下浏览器，看看是不是浏览器本身异常了等。
接下来，就是我个人的比较独特的问题了，如果你还没有解决，或者好奇我遇到的是一个怎样的问题，你也可以往下读。
问题描述
在chrome浏览器上开发vue项目，结果突然发现异步获取数据后视图没有更新。
排查
这个问题很奇怪，因为之前在公司的时候，代码明明是没有问题的，当时我以为可能是自己不小心改了什么代码，出bug了。当然我心里一点都不慌，数据没有更新嘛，一般原因有以下几点：
- 数据没有设置成功
- 设置的数据不是响应式的
- 设置的数据和视图上的变量不是同一个，可能设置错了变量
结果！！！竟然不是这些原因，我通过vue的Devtools工具查看，发现数据正确设置了，而且是响应式的，可以动态更新。
我不放心，又通过debugger打断点，并输出了相应的data到控制台上，结果确认我所希望使用的变量确实已经被vue进行了劫持（vue2的响应式其实就是通过Object.defineProperty对数据进行监听）
我随便mock了一个数据截图如下：如果一个变量属性是响应式的，那它应该会多出了下图中框住的get/set。
由此我确认了我的数据是响应式的，我又再三确认了视图的变量没有问题。这时，我开始慌了，感觉自己可能掉进了一个不好排查的坑里面出不来了。果然，我尝试了各种办法，却始终无法解决这个问题。期间我也试了各种各样的手段去搜索，始终一无所获。
直到我试着在360浏览器上打开这个页面，发现页面的数据竟然可以动态刷新！！！这时我反应过来，难道是浏览器的兼容问题，或者是浏览器本身异常？
我又试着重启chrome浏览器，发现还是不行。
难道真的是兼容问题吗？但是没有理由的呀，之前在公司明明是正常的，难道还和浏览器版本有关系？这时我开始想这个数据和普通的数据有什么不同，一个明显的不同是这个数据嵌套比较深？不会吧，数据嵌套太深会导致数据无法同步的吗？
说实话，我纠结了很久，最后是真的无意间发现了真相：
真相
导致我数据无法同步的真凶竟然是Google 翻译这个插件。。。
真相是这样的，我对页面头部写了<html lang="en">结果浏览器插件就帮我对页面进行了翻译，当然我的页面本身就是中文，我并没有看出异常。但是这个时候的页面已经是翻译的页面了，我dom的变化这个翻译的页面是不会同步的。所以就导致了我所看到的数据没有刷新的问题。
发现真相的时候我的内心是崩溃的，搞了这么就原因竟然是这个。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
基于electron+vue3+ts搭建桌面端应用并且可以热更新
这篇文章主要为大家详细介绍了如何基于electron+vue3+ts搭建桌面端应用并且可以热更新,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下2023-10-10
这篇文章主要介绍了vue-test-utils初使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
本篇文章主要旨在帮助正在学vue3或者准备学vue3的同学了解网络请求axios该如何使用，防止接触了一点点vue3的同学会有个疑问。有兴趣的小伙伴可以关注一下2021-11-11
这篇文章主要为大家详细介绍了vue实现简单的登录弹出框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了Vue操作DOM解决显示位置问题,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-12-12
Vue时间轴 vue-light-timeline的用法说明
这篇文章主要介绍了Vue时间轴 vue-light-timeline的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
Vue如何使用Element-ui表单发送数据与多张图片到后端详解
在做项目的时候遇到一个问题,前端需要上传表单到后端,表单数据包括文本内容和图片,这篇文章主要给大家介绍了关于Vue如何使用Element-ui表单发送数据与多张图片到后端的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue cli3 实现分环境打包的步骤，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-03-03
这篇文章主要给大家介绍了关于vue3.0关闭eslint校验的3种方法,在实际开发过程中,eslint的作用不可估量,文中将关闭的方法介绍的非常详细,需要的朋友可以参考下2023-06-06
本文主要介绍了Vue 3.0中的setup函数,包括其概述、使用场景和具体用法,通过本文的介绍,我们可以看到,setup函数是用来将组件的状态和行为进行分离的一个重要工具,感兴趣的朋友跟随小编一起看看吧2024-11-11
最新评论