Vue.set

Vue.set用于在外部修改vue构造器内部数据。

引入外部数据。

在开发中，有些数据并不在Vue构造器中，我们需要引入外部数据至构造器内部，之后进行相关操作。外部数据就是在构造器外部声明的数据。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。

    <script type="text/javascript">
        var outData = {
            name: 'aaa',
            count: 1,
            list: [111, 222, 333]
        }
        var app = new Vue({
            el: "#app",
            data: outData
        })
    </script>

此时已经引入完毕，可以之际进行页面绑定。

    <h1>{{name}}</h1>
    <h1>{{count}}</h1>
    <ul>
        <li v-for="a in list">{{a}}</li>
    </ul>

进行数据操作

一共有三种方法进行操作。例如我们改变count的值。

第一种方法，运用Vue.set进行操作。

   Vue.set(outData, 'count', 2)

第二种方法，通过Vue对象进行操作。

   app.count++

第二种方法，直接进行外部操作。

   outData.count++

三种方法都可以，所以Vue.set存在的意义是什么。

Vue.set存在的意义

Vue.set()的参数

Vue.set(object, key, value)共有三个参数。

object：需要改变的对象（数据源）

key：需要改变的具体数据

value：改变之后的值

Vue.set()存在的意义

由于JavaScript的特殊原因，vue无法对数组的一些操作进行检测。 1、对数组下标进行操作。 2、对数组的长度进行操作。

比如我们看个例子

    <ul>
        <li v-for="a in list">{{a}}</li>
    </ul>

    function change() {
        app.list[3] = '44444'
        console.log(app.list)
    }

可以看到点击改变数组之后，在控制台中已经输出但是Vue并没有检测。我们改为Vue.set看一下效果

   function change() {
        Vue.set(outData.list, 3, 4444)
        console.log(app.list)
    }

结语

每天记录一下学了什么，希望有所进步。萌新有说不清楚或者说错的地方欢迎大佬们吊打。??

跟着大佬技术胖学vue系列 Vue.set