vue中数组引用改变了视图不更新如何解决

qq_44739231 2021-05-01 08:16:12

el-menu中使用v-for遍历一个数组然后生成菜单列表，但是当数组改变时，视图不会重新渲染

...全文

834 5 打赏收藏转发到动态举报

写回复

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

Git_Yang 2021-05-08

打赏
举报

回复

vue对子对象的属性是没做深度监听的不然计算量太大了只能用$set 或者是你定义一个临时变量用来接收变更后的数组再赋值给你for循环里面引用的数组

qq_45627583 2021-05-06

打赏
举报

回复

需要使用this.$set来更新数组对象里面的视图，这个是vue遗留的bug，数组的item对象更新，视图不会更新的

李健杰 2021-05-06

打赏
举报

回复

this.$set是个好东西，你估计用了一些vue无法监听数组变化的方法

前端小歌谣 2021-05-05

打赏
举报

回复

贴一下代码。。。

泡泡鱼_ 2021-05-01

打赏
举报

回复

用错了呗。代码都不发的……这让人怎么知道是什么问题？

Vue数据响应原理官方的解释很清晰：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化

今天小编就为大家分享一篇vue 解决数组赋值无法渲染在页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

主要给大家介绍了关于vue踩坑记录之数组定义和赋值问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

回忆在上一篇Vue响应式原理-理解Observer、Dep、Watcher简单讲解了Observer、Dep、Watcher三者的关系。在Observer的伪代码中我们模拟了如下代码: class Observer { constructor() { // 响应式绑定数据通过方法 observe(this.data); } } export function observe (data) { const keys = Object.keys(data); for (let i = 0; i < keys.length; i++) { // 将data中我们定义的

下面小编就为大家分享一篇vue.js中$set与数组更新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

87,992

社区成员

224,698

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章