Vue2.0 vue.set

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

一、引用构造器外部数据：

什么是外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。

看一个简单的代码：

  

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

二、在外部改变数据的三种方法：

1、用Vue.set改变

  

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

2、用Vue对象的方法添加

  

app.count++;

3、直接操作外部数据

  

outData.count++;

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

三、为什么要有Vue.set的存在?

① 当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；

②  由于Javascript的限制，Vue不能自动检测以下变动的数组。

    *当你利用索引直接设置一个项时，vue不会为我们自动更新。

    *当你修改数组的长度时，vue不会为我们自动更新。

四、使用方法

Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

如： 

Vue.set(data,'sex', '男')

Tip:Vue.set()在methods中也可以写成this.$set() （这也是全局 Vue.set方法的别名）。 

var key = 'content'; //这种主要用于当对象中某个属性值动态生成时处理方式
this.$set('info.'+key, 'what is this?');
或
this.$set('info.content', 'what is this?');