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

如题所述

第1个回答  2022-07-06

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

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

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

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

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

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

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

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