跟着技术胖学Vue2.0—第二季第三课：Vue.set全局操作

课程回顾

课程主要内容

1、Vue构造器中调用外部变量。

2、三种实现数字增加的方式。

3、Vue.set的作用。

课程展开

1、Vue构造器中调用外部变量

前面写Vue构造器的时候必写的两个变量是el和data，现在将data中的内容在构造器外部声明，然后由data来调用使用。

html：

<div id="app">
        <p>{{count}}</p>
</div>

script：

var outData = {
            count:1
        }
        var app = new Vue({
            el:'#app',
            data:outData
})

上述方式的效果和直接在data中声明变量的效果是一样的，不过要注意html中的写法。

2、三种实现数字增加的方式

上一步定义了一个count，现在我们需要实现点击按钮，然后数字增加1，下面介绍三种实现方式。

首先补充上html中的代码，button位于div外部，这样就直接使用js原生的方法实现：

<div id="app">
        <p>{{count}}</p>
</div>
<p><button onclick="add()">ADD</button></p>

方式1：直接操作app

function add(){
     app.count++;
}

方式2：直接操作outData

function add(){
      outData.count++;
}

方式3：使用Vue.set来操作

function add(){
    Vue.set(outData,'count',2);
}

方式3中使用了我们本节课新学的Vue.set全局API，它的三个参数分别表示要改变的变量、要改变的变量位置、要变成的值。因此方式3是将1直接变为2，其他两种方式是按一次按钮就增加1，可以一直增加下去。

3、Vue.set的作用

刚刚提到的Vue.set用法并不是它最主要的作用，因为这个功能是可以被方式1和2替代的，且另外两种方式更简便。现在介绍它独一无二的功能。首先我们在outData中再定义一个arr字符串数组，然后在html中用li给循环显示出来。

html：

<div id="app">
        <p>{{count}}</p>
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
</div>

outData：

var outData = {
            count:1,
            arr:['aaa','bbb','ccc']
}

前端页面效果：

下面我们要实现点击ADD按钮，就将arr[1]的值“bbb”变为“dd”，在不使用Vue.set时，我们想到的就是直接操作arr[1]，即arr[1]=‘dd’。但是点击ADD按钮，发现并不会实现值的改变，这是因为Vue不支持对数组直接操作下标来改变值，如果add方法中只有这个语句的时候，该方法不会执行。但是我们将前面改变count值的语句写在方法里的话，此刻就能成功运行arr[1]这条语句。

我们不能在每次操作数组时都再加一个语句，因此这个时候就用到了Vue.set，它可以支持对数组的操作，具体代码如下：

function add(){
     Vue.set(outData.arr,1,'dd');
}

上述代码中，第一个参数依旧表示要改变的变量，第二个则是下标值，第三个就是该位置要改变为的值。现在就可以完美实现点击ADD按钮改变arr[1]的效果啦。

---

以上就是第二季第三节课的学习内容，我们下次再见啦！