Vue中的set方法

在修改数组或对象的值时，除了上篇文章《Vue中的列表渲染》讲到的方法其实还有一种，那就是vue提供给我们的set方法，通过set方法我们可以实现数据发生变化页面随之改变的效果。

对象的set方法

回顾一下，在上篇文章中有讲到一种方法

1. 改变引用

本文讲到的是第二种 -- set方法，用法：

通过vue的set方法，我们向对象中增加值，数据发生了改变页面随之发生了改变，我们还可以打印一下数据，来看一下是否发生了改变：

可以清楚的看到address已经被添加到了数据之上。

vue的set方法不仅可以这样用，还可以换种用法，因为set不仅是vue的一个全局方法，同时也是vue的实例方法，实例方法怎么使用呢？

我们可以发现，通过vue实例的$set方法可以实现一样的效果。

数组的set方法

回顾一下，在上篇文章中有讲到两种方法

1. 调用数组的变异方法（pushpopshiftunshiftsplicesortreverse）
2. 改变引用

本文讲到的是第三种 -- set方法，用法：

通过图片我们可以看到，用vue的set方法改变数组下标是4的值为5，并且页面也发生了改变；使用vue实例的$set方法改变数组下标是5的值为6，页面也随之发生了改变。最后我们打印实例的数据，可以看到数据已经发生了改变。

总结

在vue中希望实现改变数组内的数据，页面也随之发生改变的方法一共有三种：

• 改变引用
• 调用变异方法
• set方法

希望改变对象内的数据，页面也随之改变的方法一共有两种：

• 改变引用
• set方法