vue $set 给数据赋值

如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

业务介绍：模拟后台数据向DOM树上遍历数据，再向数据里添加状态属性，根据状态改变显示图片，默认nochecked.png，点击时改变状态。显示checked.png

DOM树

模拟数据

向原数据添加新属性status

点击事件(根据索引改变当前属性的状态)

输出发现有status属性，状态也由false改为了true，但是就是样式要刷新一下才能显示。把里面的属性仔细看一遍原来status没有get/set方法。错误展示：

把 val.status=false 改为 this.$set(val,'status',false) 问题就解决了。

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

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

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

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

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

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

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

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

---