vue数组动态刷新失败问题及解决
更新时间：2024年03月11日 08:37:38 作者：赵成默
这篇文章主要介绍了vue数组动态刷新失败问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
vue 数组动态刷新失败，包括视使用pop、push、splice，shift等数组函数和this.$forceUpdate()强制刷新等方式也是失败的
原因
其实原因不在于所谓的，vue不监听数组的问题，
事实上，只是由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
当你利用索引直接设置一个数组项时：
例如：
vm.items[indexOfItem] = newValue
当你修改数组的长度时，
例如：
vm.items.length = newLength
但是我是直接赋值的
vm.items. = new item；
这种方式，vue依旧是可以监听到的，所以我尝试了上面的几种方式，都未成功
最后，我突然看到一个词** “就地复用” **，在官网上，有这么的一句话
- 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。
- 如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
- 这个默认的模式是有效的，但是只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。
所以，我就尝试加一个唯一id作为key值，最终成功了
所得
- 直接使用对象的属性进行修改，页面是不能冬天刷新的
- 视同v-for的时候，尽量加上唯一值作为key，避免vue使用“就地复用” 策略，导致显示出现问题
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 中 命名视图的用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
这篇文章主要给大家介绍了关于vue改变数据后数据变化页面不刷新的解决方法,vue比较常见的坑就是数据(后台返回)更新了,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
element ui中的table表格数据是动态生成的,最近遇到个需求,要求我们对单元格进行合并,所以下面这篇文章主要给大家介绍了关于Element UI中table单元格合并的解决过程,需要的朋友可以参考下2022-08-08
这篇文章主要跟大家介绍了vue项目中全局引入1个.scss文件的问题解决，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要介绍了vue项目自动设置请求状态的配置方法,本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
本文主要介绍了vue3+webpack中npm发布组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
这篇文章主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下2019-05-05
关于element同时使用Drawer和Dialog出现多个遮罩问题
这篇文章主要介绍了关于element同时使用Drawer和Dialog出现多个遮罩问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
VueNative是一个使用JavaScript构建跨平台原生移动应用程序的框架m这篇文章主要给大家介绍了关于如何利用Vue Native构建移动应用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了解决Vue3+ts项目打包时报错的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
最新评论