Vue方向:Vue实例上使用$set()更新对象或数组

Vue方向:Vue实例上使用$set()更新对象或数组,第1张

在vue的实例方法中, $set 可以更新对象数据或是数组,有时在实际的开发过程中,对象的数据可能会没有及时地更新,导致页面渲染的值还是旧值,这个时候就可以使用 $set 去重新更新下数据。

使用方法: $set(data选项中的对象名, 属性名, 属性值)

数组的处理方法有两种,一种是直接通过修改数组的引用从而达到改变数组内容在页面重新渲染的效果,这种方法实际开发中不推荐,比较笨重。

修改数组元素个人喜欢spice()方法,splice(插入的位置索引号,删除元素的个数,插入的元素)

在js中,还有一种修改数组的方法,那就是通过直接修改数组索引下标,从而修改数组中的元素数据内容,但是这样做,就会出现,数组更新了,但是页面没有重新渲染,也就是说,updated()生命周期函数没有执行!

可以看到,使用这种方法就会导致页面数据没有进行重新渲染!但是数组确实是发生了变化的。因此,实际开发中需要避开这种 *** 作,以免产生数据渲染失败的问题。

$set() 的使用方法是 this.$set(数组名,插入的索引下标值,插入的数据元素)

这种修改数组的方式,同样是能够达到数组的内容发送改变并且页面也是能够重新渲染的。

添加当儿元素比较简单,只需要一个关键字push 他的意思就是把当前元素添加到数组的最后

直接添加数组元素就更简单了

他的意思就是,把当前数组this.newsList  和临时数组list  组成一个新的数组,然后重新赋值给this.newsList 

1. 有时候我们会碰到这种情况:比如我们渲染一个table,从后端返回的数组里面并没有我们想要的字段,如果让后台帮忙加上的话,会增加冗余字段,这样会增加后端的维护成本,并不可取。

2. 我们可以通过 this.$set 来增加一个字段比如:

                    const lists = res.data // 后端返回数组

                    this.tableData = lists.map(i =>{

                        this.$set(i, edit , false)

                        return i

                    })

3. 更详细的可以去查看官方文档, ps:Vue官网转了好久打不开。。。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11802526.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-18
下一篇2023-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存