vue.set向对象里增加多层数组属性不生效问题及解决

作者:Vincent.TM 时间:2024-05-09 10:52:12 

属性多层数组数据的添加修改

为什么需要使用Vue.set?

vue中不能检测到数组的一些变化

比如一下两种:

1、数组长度的变化 vm.arr.length = 100

2、数组通过索引值修改内容 vm.arr[1] = ‘aa’

那么为什么vue要做成这样,不去监听数组的变化,数组在日常中使用频率还是比较高的,这个问题其实尤大说过,是为了性能,假设我们新建了一个数组,长度是1000 但是只使用了前几个 ,去实现页面的响应式监听,从数组改变到页面输出一共需要遍历两遍数组,会增加性能消耗,这可能就是不去监听某一项数组数据变化的原因吧。

以下是vue observer的的源码,判断是数组了,会停止对数据属性的监测。

vue.set向对象里增加多层数组属性不生效问题及解决

所以vue提供了Vue.set 方法弥补这些不足,Vue.set同vm.$set(target,key,value):可以动态的给数组、对象添加和修改数据,并更新视图中数据的显示。

vue在构造函数new Vue()时,就通过Object.defineProperty中的getter和setter 这两个方法,完成了对数据的绑定。

所以直接通过vm.arr[1] = ‘aa’的方法,无法修改值去触发vue中视图的更新,必须还得通过Object.defineProperty的方法去改变,而Vue.set()就封装了js底层的Object.defineProperty方法。

所以我们需要利用Vue.set() 响应式新增与修改数据。

最近项目中使用到了树形表格

即多层嵌套的数据,类似于这样的页面展示。

数据结构如下:

obj:[
       {
         id:'1',
         type:'1',
         children:[
           {
             id:'1-1',
             type:'1-1',
           }
         ]
       }
     ]

vue.set向对象里增加多层数组属性不生效问题及解决

在每一层数据的数据量都比较大的时候,不能使用一次性加载所有数据,需要优化加载,点击table的expand,即@expand-change方法获取下一层数据,那么就需要给下一层数据增加children属性

那么我们肯定会想到一下几种方法:

  • 第一种:

this.$set(this.obj[index],‘children',[…res.items])
  • 第二种:

this.obj[index].children = []
this.obj[index].children.splice(0,0,…res.items) //或者push方法
  • 第三种:

使用foreach方法,循环res.items使用 

this.$set(this.obj[index].children,index,res.items[index])

我使用了这几种方法,甚至是组合使用了,但是结果不是很好,数据是增加上了,但是并没有响应式的增加上,页面都没有展示出相应的数据,查看结构时,发现到第三层的时候,增加的children已经没有{ob:Observer},ob_: Observer是vue这个框架对数据设置的监控器,有这个属性,才能监听到数据的变化。

找了很久都不可以。最终尝试了以下方法才得以解决:

//给第三层增加数据
this.$set(this.obj[level1Index].children[level2Index],'children',[])
//使用foreach 将数组的每一项添加为响应式数据
res.items.forEach((item,index)=>{
this.obj[level1Index].children[level2Index]
this.$set(this.obj[level1Index].children[level2Index].children,index,item)
})

首先先添加children数组为响应式,再去将数组中的每一项也添加为响应式,页面变可以正常显示啦 。

向对象数组中添加新属性

this.rightMenuList.forEach(ele=>{
?? ??? ??? ??? ??? ?this.$set(ele, 'carInfo', data.carInfo)
?? ??? ??? ??? ?})
this.tableColums.forEach(res=>{
?? ??? ??? ??? ?this.$set(this.exportParams,res.id,"");
?? ??? ??? ?})

来源:https://blog.csdn.net/houyibing930920/article/details/104738509

标签:vue.set,对象,多层数组,属性
0
投稿

猜你喜欢

  • javascript 读取图片文件的大小

    2024-04-17 10:40:11
  • Python+Pillow进行图形处理的示例详解

    2021-08-03 22:42:34
  • Python多线程通信queue队列用法实例分析

    2023-09-22 21:11:44
  • php导出excel格式数据问题

    2023-07-13 22:46:06
  • Vue Element前端应用开发之常规Element界面组件

    2024-04-26 17:39:32
  • python基本数据类型练习题

    2022-07-21 14:26:26
  • python中学习K-Means和图片压缩

    2022-08-15 14:09:07
  • python实现经典排序算法的示例代码

    2021-10-27 09:36:24
  • 详解Python 调用C# dll库最简方法

    2022-05-22 00:20:09
  • Oracle 8x监控sysdba角色用户登陆情况

    2024-01-19 08:56:43
  • Python参数解析模块sys、getopt、argparse使用与对比分析

    2021-12-19 17:39:58
  • python导入导出redis数据的实现

    2023-02-24 11:10:55
  • asp如何在网上查找链接?

    2010-06-22 21:10:00
  • vue表单数据交互提交演示教程

    2024-04-10 13:48:08
  • Python 使用PIL numpy 实现拼接图片的示例

    2021-03-20 02:50:20
  • Python并发之多进程的方法实例代码

    2022-04-13 12:43:54
  • vue-element如何实现动态换肤存储

    2024-04-27 15:57:35
  • 爱你就要说出来,来表白吧

    2008-11-23 16:23:00
  • 通过Python绘制中国结的示例代码

    2021-05-29 15:15:21
  • 解决SQL SERVER 2008数据库表中修改字段后不能保存

    2024-01-18 07:31:10
  • asp之家 网络编程 m.aspxhome.com