还没好。。。

vm.$set(target,key,value)

（1）参数

{Object | Array} target

{string | number} key

{any} value

（2）返回值

{ Function } unwatch

（3）用法

在object上设置一个属性，如果object是响应式的，Vue.js会保证属性被创建后也是响应式的，并且触发视图更新。这个方法主要用来避开Vue.js不能侦测属性被添加的限制。

（4）注意

target不能是Vue.js实例或则Vue.js实例的根数据对象。

（5）解决问题

1、只有已经存在的属性的变化会被追踪到，新增的属性无法追踪到。因为在ES6之前，Javascript并没有提供元编程的能力，所以根本无法侦测object什么时候被添加了一个属性。

2、而vm.$set就是为了解决这个问题而出现的。使用它，可以为object新增属性，然后Vue.js就可以将这个新增属性转换成响应式的。

经常有一道关于Vue的面试题：

问：利用Object.defineproperty来劫持监听 data，有什么缺点。

答案其实就是包括上面解决的问题

Object.defineproperty 不能监听 某个对象新增或删除的属性，当设置数组的length = 0时，无法监听到，以及直接根据数组索引值赋值时，例如arr[index] =1 ,也监听不了 所以 建议清空数组时 直接用空数组覆盖原数组。

3、例

var vm = new Vue({

el:‘#el’,

template:‘#demo-template’,

methods:{

action(){

this.obj.name = ‘berwin’

}

}

data:{

obj:{}

}

})

直接给obj设置一个属性,当action方法被调用时，会为obj新增一个name属性，而Vue.js并不会得到

任何通知，新增的这个属性也不是响应式的，Vue.js根本不知道这个obj新增了属性，就好像

Vue.js无法知道我们使用array.lenght = 0 清空了数组一样

4、vm. s e t 就 可 以 解 决 这 个 事 情 。 v m . set就可以解决这个事情。vm. set就可以解决这个事情。vm.set实现

import {set} from ‘…/observer/index’

Vue.prototype.$set = set;

1）在Vue.js的原型上设置 s e t 属 性 。 其 实 我 们 使 用 的 所 有 以 v m . set属性。其实我们使用的所有以vm. set属性。其实我们使用的所有以vm.开头的方法都是在Vue.js的原型上设置的。

2）vm.$set的具体实现其实是在observer中抛出的set方法。

5、先创建一个set方法

export function set(target,key,val){

//做点什么

}

2. Array的处理

---

（1)如果target是数组并且key是一个有效的索引值，就先设置length属性。这样如果我们传递的索引值大于当前数组的length，就需要让target的length等于索引值。

（2）通过splice方法把val设置到target中的指定位置（参数中提供的索引值的位置）。当我们使用splice方法把val设置到target中的时候，数组拦截器会侦测到target发生了变化，并且会自动帮助我们把这个新增的val转换成响应式的。

（3）最后，返回val即可。

3. Object的处理

---

3.1 如果key已经存在于target中

export function set(target,key,val){

if(Array.isArray(target)&&isValidArrayIndex(key)){

target.length = Math.max(target.length,key)

target.splice(key,1,val)

return val

}

//新增

if(key in target && !(key in Object.prototype)){

target[key] = val;

return val;

}

}

（1）由于key已经存在于target中，所以其实这个key已经被侦测了变化。也就是说，这种情况属于修改数据，直接用key和val改数据就好了。修改数据的动作会被Vue.js侦测到，所以数据发生变化后，会自动向依赖发送通知。

3.2处理新增的属性

export function set(target,key,val){

if(Array.isArray(target)&&isValidArrayIndex(key)){

target.length = Math.max(target.length,key)

target.splice(key,1,val)

return val

}

if(key in target && !(key in Object.prototype)){

target[key] = val;

return val;

}

//新增

const ob = target.ob;

//target不能是Vue.js实例或则Vue.js实例的根数据对象

if(target._isVue || (ob && ob.vmCount)){

process.env.NODE_ENV !== ‘production’ && warn(

‘Avoid adding reactive properties to a Vue instance or its root $data’ +

‘at runtime - declare it upfront in the data option’

)

retun val;

}

//不是响应式的

if(!ob){