记录vue不能检测数组和对象变动的方法。

Clect 发布于2019-08-23 15:54 / 2203人阅读

摘要：当然按照官方文档的解释，检测不到的主要问题是导致的。下列代码，是解决数组检测不到的问题。

测试数据：

  items: [
    {name: "业务状态", id: "taskState", data: [{name:"全部", id: 0},{name:"进行中", id: 1},{name:"已完成", id: 2},{name:"已归档", id: 3},{name:"已终止", id: 4}]},
    {name: "业务状态", id: "taskState", data: [{name:"全部", id: 0},{name:"进行中", id: 1},{name:"已完成", id: 2},{name:"已归档", id: 3},{name:"已终止", id: 4}]},
    {name: "业务状态", id: "taskState", data: [{name:"全部", id: 0},{name:"进行中", id: 1},{name:"已完成", id: 2},{name:"已归档", id: 3},{name:"已终止", id: 4}]},
    {name: "业务状态", id: "taskState", data: [{name:"全部", id: 0},{name:"进行中", id: 1},{name:"已完成", id: 2},{name:"已归档", id: 3},{name:"已终止", id: 4}]},
  ]

难点：

items是个数组，里面嵌套着许多层对象。当然数据是不一样的，我这里只是举例说明。

这里面存在着二个难点，第一，直接改变items数量，vue是检测不到的。第二，增加items[i]里的对象属性。vue也是检测不到。

当然按照vue官方文档的解释，检测不到的主要问题是JavaScript导致的。（尤雨溪大佬你说的算）

代码：

// 解决办法    
this.$set(this.items, 0, Object.assign({}, this.items[0], { active: 0, defaultActive: 0 }))

// 实际应用
this.items.forEach((r, row) => { // 变量数组，给每个对象附上默认值
    this.$set(this.items, row, Object.assign({}, this.items[row], {
      thisActive: r.thisActive ? r.thisActive : 0,
      defaultActive: r.defaultActive ? r.defaultActive : 0,
      data: r.data ? r.data : [],
      pageIndex: r.pageIndex ? r.pageIndex : 1,
      pageSize: r.pageSize ? r.pageSize : 20,
      options: r.options ? r.options : {scrollbar: true, pullUpLoad: true},
      ref: r.ref ? r.ref : "scroll" + row
    }))
})

这里解释一下，下列代码，是解决对象不能检测的问题，这里是一次性添加多个属性的方法。

let test = Object.assign({}, this.items[0], { active: 0, defaultActive: 0 })

下列代码，是解决数组检测不到的问题。(对象也可以用这个方法)
index--索引 "age"|| 13 分别代表对象里的键||值

this.$set(this.items, index, test)) // 数组方法
this.$set(this.items[index], "age", 13)) // 对象方法

以上解决方法代码，来自vue官方文档链接描述, 看不懂就自己按照文档的去敲一下。

GPU云服务器云服务器数组变动检测 js 创建数组和对象人脸检测的方法建立对象的方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102521.html

记一次思否问答的问题思考：Vue为什么不能检测数组变动

摘要：这里加了个简单判断，只看数组元素的，然后写了一个简单案例，主要测试使用改变数组元素能不能被监测到，并响应式的渲染页面运行页面可以看到，运行了次，我们数组长度为，也就是说数组被遍历了两遍。问题来源：https://segmentfault.com/q/10... 问题描述：Vue检测数据的变动是通过Object.defineProperty实现的，所以无法监听数组的添加操作是可以理解的...

raoyi 2019-08-23 10:24 评论0 收藏0
vue 关于数组和对象的更新

摘要：在日常开发中，我们用的最多的就是绑定数据内容如果你有的开发经验，假设你要更新数据了但是这在中并不会起到作用，并没有触发变化。如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。在日常开发中，我们用的最多的就是绑定数据如果你有ng的开发经验，假设 data 你要更新数据了 this.data=res.data; 但是这在vue中并不会起到作用，DOM并没有触发变化。 ...

番茄西红柿 2019-04-23 13:16 评论0 收藏0
vue总结系列--数据驱动和响应式

摘要：由于是需要兼容的后台系统，该项目并不能使用到等技术，因此我在上的经验大都是使用原生的编写的，可以看见一个组件分为两部分视图部分，和数据部分。在公司里帮项目组里开发后台系统的前端项目也有一段时间了。 vue这种数据驱动，组件化的框架和react很像，从一开始的快速上手基本的开发，到后来开始自定义组件，对element UI的组件二次封装以满足项目需求，期间也是踩了不少坑。由于将来很长一...

AbnerMing 2019-08-22 18:26 评论0 收藏0
从数组入手浅析Vue响应式原理

摘要：响应式原理为了探究这一切的原因，我再次点开了的官网。在官网很下面的位置，找到了关于响应式原理的说明。因此，新添加到数组中的对象中的属性，就成了非响应式的属性了，改变它自然不会让组件重新渲染。响应式属性的对象，有这个对象就代表是响应式的。最近在用Vue开发一个后台管理的demo，有一个非常常规的需求。然而这个常规的需求中，包含了大量的知识点。有一个产品表格，用来显示不同产品的信息。...

dkzwm 2019-08-26 10:10 评论0 收藏0
用vue框架的基本原理，简单实现一个todo-list

摘要：前言最近在学习框架的基本原理，看了一些技术博客以及一些对源码的简单实现，对数据代理数据劫持模板解析变异数组方法双向绑定有了更深的理解。前言最近在学习vue框架的基本原理，看了一些技术博客以及一些对vue源码的简单实现，对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎，尝试着去实践自己学到的知识，用vue的一些基本原理实现一个简单的todo-list，完成...

Karrdy 2019-08-20 18:31 评论0 收藏0