Vue.js - Vue 中的 set 方法

今天给大家补充一下 Vue 中的 set 方法。

打开昨天结尾时候的代码，昨天的链接：

    
    
    


    

        

            {{ item }} - {{ key }} - {{ index }}
        
    

    

页面的效果是这样的，回顾一下昨天我们修改 userInfo 里面的方法是这样的：

需要修改整个引用才能修改 userInfo 内的数据，这样不仅不方便，而且还需要把原来是数据重新输入一遍，我们不可能每次都重复这样的操作，会浪费我们大量的时间。就有了 set 这个方法的出现。

我们来看一下这个 set 方法怎么使用：

在 Vue.set() 这个方法中传入三个参数，第一个 app.userInfo 是选择哪个对象，第二个 "address" 是要添加的对象的键，第三个 "beijng" 是要添加对象的值。注意 Vue.set() 的 vue 是大写字母开头的。当数据变了时候，页面也会跟着改变。

看一下 userInfo 中的数据有没有改变：

会发现，数据也添加到了 userInfo 对象里。

set 方法不仅是一个全局的方法，同时也是一个 vue 实例方法，我们来看一下实例方法怎么使用：

跟全局方法差不多，只是在 set 加了个美元符号（$），其他参数都是一样的。

接着讲解一下数组当中 set 方法的使用，把代码修改一下：

    
    
    


    

        

            {{ item }}
        
    

    

改成了一个普通的数组循环渲染，userInfo 中的数据是 1、 2、 3、 4、 5 渲染出来的样子也就是这样的：

我们现在知道的操作数组的方法有两种：一种是变异方法，大概有七种；另一种直接修改数组的引用。

今天再讲一个数组的 set 方法。昨天我们也说到，直接通过数组的下标进行修改是不行的，数据虽然被改变了，但是页面却不会发生变化。

现在我们用 set 方法修改一下数组：

用 set 把下标为 2 的数据，也就是第三个数据，修改成 666 ，当我们修改完成，页面也发生了改变，数组里的 3 也变成了 666 ：

可以调用全局方法，也一样可以调用实例方法：

这就是今天的所有内容，比较简单，可以跟着图片操作一下，熟悉熟悉这个方法，感谢一直的支持！

---

关注持续更新哦~