VueJS----[全局API-2.3]----Vue.set全局操作

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010996565/article/details/82056611

Vue.extend构造器的延伸

Vue.set的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在Vue构造器内部定义一个count为1的数据，我们在构造器外部定义的一个方法，要每次点击按钮给值加1，就需要用到Vue.set

1.引用构造器外部数据

什么是外部数据，就是不在构造器里的data处声明，然后再data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据格式，然后让data引用
看一个简单的代码

//在构造器外部声明数据
 var outData={
    count:1,
    goodName:'car'
};
var app=new Vue({
    el:'#app',
    //引用外部数据
    data:outData
})

2.在外部改变数据的三种方式

a.用Vue.set改变
function add(){
  Vue.set（outData,’count’,4）;
}
b.用Vue对象的方法添加
app.count ++;
c.直接操作外部数据
outData.count++;

其实这三种方式都可以操作外部的数据，Vue也给我们增加了一种操作外部数据的方法

3.为什么要有Vue.set的存在？

由于JavaScript的限制，Vue不能自动检测以下变动的数组
当你利用索引直接设置一个项时，vue不会为我们自动更新
当你修改数组的长度时，vue也不会为我们自动更新

<div id="app">
        {{count}}
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
        <button onclick="add();">add</button>
    </div>
    <script type="text/javascript">
        function add(){
            // Vue.set(outData,'count',2);
            app.arr[1]='ddd';
        }
        var outData={
            count:1,
            goods:'car',
            arr:['aaa','bbb','ccc']
        }
        var app = new Vue({
            el:'#app',
            data:outData
        });
    </script>

这时我们的界面是不会自动更新数组的，我们需要用Vue.set(app.arr,1,’ddd’)来设置改变，vue才会自动给我们更新，这就是vue存在的意义