简单记录一下vue中修改了数组或者对象以后数据更新，但是视图没有更新的问题(vue2),vue中的代码，但是用的js的写法

已于 2022-05-10 16:34:04 修改
阅读量1.1k 收藏 1
点赞数
分类专栏： vue 文章标签： 前端 开发语言 javascript vue.js
于 2022-04-12 16:55:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_52295201/article/details/124127804
版权
本文主要探讨了在Vue2中遇到数组和对象更新后视图未更新的问题。针对数组，提到了使用重写方法、深拷贝赋值和$set进行更新。对于对象，提出了深拷贝后再赋值、使用Object.assign()和$set的方法来确保视图同步。同时，注意JSON深拷贝可能存在的局限性。
摘要由CSDN通过智能技术生成

一、数组

  • 使用数组重写的方法
const arr = ['arr1','arr2'];
arr.splice(0,1,'arr0');
console.log(arr
最低0.47元/天 解锁文章
修炼前端的心酸
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
为什么在vue2中改变数据视图不会更新,带你阅读源码
m0_62371650的博客
12-06 631
在vue2中,改变数据有时候视图不会更新,改怎么解决呢?
Vue深拷贝？数组赋值数据不更新
qq_52212039的博客
11-20 533
Vue深拷贝
vue2修改数组或对象，但视图不刷新
admin00088的博客
10-13 1万+
vue2修改数组或对象，但视图不刷新的解决办法： 1. Vue.$set(官方推荐) 2. v-if静默刷新 3. Vue.$forceUpdate(手动强制更新视图) 4.Object.assign(使用修改栈能触发视图更新的特性) 5.对于数组还可以使用splice方法push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Vue修改数据页面不更新的问题解决_vue数据改变了,但页面数据没有更新
最新发布
2401_84446787的博客
05-16 1288
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？
vue2.x 对象 数组更新
weixin_42715209的博客
06-28 458
对象： this.$set(obj, key, val) Vue.set(obj, key, val) this.$delete(obj, key) Vue.delete(obj, key) 数组： this.$set(arr, index, val) Vue.set(arr, index, val) arr.splice(index, 1, val)
vue 中数组中的某个对象的属性发生变化，视图不更新如何解决?
QLF19的博客
07-25 2017
第一种是数组的值改变，在改变数组的值的时候使用索引值去更改某一项，这样视图不会实时更新，这种情况是因为直接通过索引去改变数组，vue对象监听不到他的变化，所以没有更新；使用vue的变异方法pop(),push(),shift(),unshift(),revese(),sort(),splice()等方法也会触发视图更新。1.利用vue.set(object,key,val)：例：vue.set(vm.obj,'k1','v1');2.利用Object.assign({},this.obj)创建新对象；
Vue 数组和对象更新,但是页面没有刷新的解决方式
10-16
在Vue.js应用中，有时我们会遇到数组和对象更新后，但视图并未随之刷新的问题。这是因为Vue为了提高性能，只监听了数据对象的属性，并不直接监控数组或对象的内部变化。当数组元素被替换或者对象属性被直接赋值时，...
解决vue中修改了数据但视图无法更新的情况
10-18
在Vue.js中，数据绑定是基于数据响应式的，这意味着当你修改数据时，视图通常会自动更新以反映这些变化。然而，在某些情况下，当你直接修改数组元素或对象属性时，Vue可能无法检测到这些变动，导致视图不会更新。...
详解Vue中数组和对象更改后视图不刷新的问题
12-03
总之，Vue 的数据响应原理基于 getter 和 setter 的机制，要求我们在操作数据时遵循特定的规则，特别是对于对象和数组的修改，必须使用 Vue 提供的方法或技巧，以确保视图的正确更新。同时，使用 Vue DevTools 可以...
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
10-15
然而，有时可能会遇到一个问题，即当Vue的数据模型发生变化时，ECharts图表的视图并没有随之更新。这个问题通常发生在ECharts图表被嵌入到Vue的弹框或者组件中。本文将详细介绍如何解决这个问题。 1. **问题描述**...
vue.js移动数组位置,同时更新视图的方法
11-26
标题提及的问题是，当尝试用以下代码移动数组元素时，虽然数组本身被更新，但视图没有同步更新： ```javascript var index = this.options.indexOf(option); var tempOption = this.options[index-1]; this.options...
Vue中对象或数组数据更新但视图不刷新问题的解决策略
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
11-13 7827
在vue中，数据的绑定都不用我们操心，例如在data中有一个 msg 的变量，你修改它，那么在页面上，msg 的内容就会自动发生变化。但是如果对于一个复杂的对象，例如一个对象数组，你直接去给数组上某一个元素增加属性，或者直接把数组的 length 变成0，vue就无法知道发生了改变。
vue数据更新但不改变视图，解决办法？
smallmww的博客
08-07 4819
第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的； 第二种:通过数组下标修改数组中的元素或者手动修改数组的长度；
解决Vue数据更新但视图不更新的问题
nunumaymax的博客
12-23 2833
vue中改变数据视图不更新 在开发中我们处理数据时会遇到数据更新了，但视图并没有更新，这种情况往往是数据嵌套层数过多导致的问题，下面给大家提供一种解决办法。 data () { return { obj: { item1: { arr:['苹果', '香蕉', '梨子', '猕猴桃'] }, item2: { arr:['火龙果', '水蜜桃', '百香果', '脆枣'] },
（详解错误情况，及解决方法）Vue 数据更新了但页面没有更新的情况
m0_55333789的博客
08-09 1万+
（详解错误情况，及解决方法）Vue 数据更新了但页面没有更新的情况
vue中数据改变，视图不更新的原因以及解决方法（强制更新视图）
热门推荐
小太阳的博客
03-16 1万+
我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下： 1.数组数据改变时，使用某些方法操作数组，数据变了，但是视图并没改变。（页面没有监测到数据改变） 解决办法： 使用下面这些方法操作数组，其数据会被vue监测 push()、pop()、shift()、unshift()、splice()、sort()、reverse()可被vue监测到。 替换数组： 例如filter()、concat()和slice(),这些不会改变原始数组，但是会返回一个新数组。可以用新数组替代原数组。你可能认为这将
关于Vue数组，对象数据变化无法更新到视图问题
我的博客
05-19 3142
问题原因：Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。 数组详解 数组数据变动，使用某些方法操作数组，变动数据时，有些方法无法被vue监测 push()，pop()，splice()，sort()，reverse()可被vue检测到 filter(), concat(), slice()。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数
Vue 对象数组修改数组中的对象的某个元素，元素更新了视图不更新的问题解决
噗嗤
06-14 1163
当我修改数组对象中的某个元素的时候，元素更新了，但是视图没有更新
在vue开发时，改变数组或者对象的数据，什么情况页面视图没有更新？如何解决？
05-26
在 Vue 中，当修改数据时，页面视图不会立即更新，而是异步更新，因为 Vue 会对数据进行异步监听，并在数据变化时批量更新视图，这样可以提高性能。 但有一些情况下，Vue 无法监听到数据的变化，导致视图没有更新，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值