Vue2源码解析 变化侦测相关的API实现原理-vm.$set

目录

1  用法

2  Array的处理

3  key已经存在于target中

4  处理新增的属性

---

1  用法

vm.$set( target , key , value );

参数：{ Object | Array }  target

           { string | number }  key

           { any }  value

返回值：{ Function } unwatch

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

注意：target不能是Vue.js实例或者vue.js实例的根数据对象。

 在vue.js的原型上设置$set属性。其实使用的所有以vm.$开头的方法都是在vue.js的原型上设置的。

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

2  Array的处理

export function set(target, key, val) {
    // target是数组并且key是一个有效的索引值
    if (Array.isArray(target) && isValidArrayIndex(key)) {
        // 先设置length属性，传递的索引大于当前数组的length，就需要让target的length等于索引值
        target.length = Math.max(target.length, key)
        // 通过splice方法把val设置到target中指定位置，并转换成响应式的
        target.splice(key, 1, val)
        return val
    }
}

3  key已经存在于target中

export function set(target, key, val) {
    if (Array.isArray(target) && isValidArrayIndex(key)) {
        // ...
    }
    // 新增
    if (key in target && !(key in Object.prototype)) {
        target[key] = val
        return val
    }
}

key已经存在于target中，所以其实这个key已经被侦测了变化，所以直接用key和val改数据就好。修改数据的动作会被vue.js侦听到。

4  处理新增的属性

export function set(target, key, val) {
    if (Array.isArray(target) && isValidArrayIndex(key)) {
        // ...
    }
    // ...
    // 新增
    const ob = target.__ob__
    // target不能是vue.js实例 或 vue.js实例的根数据对象
    if (target._isVue || (ob && ob.vmCount)) {
        process.env.NODE_ENV !== 'production' && warn('....')
        return val
    }
    // 处理不是响应式的值，target身上没有__ob__属性说明不是响应式的
    if (!ob) {
        // 是响应式的话直接更新值就行
        target[key] = val
        return val
    }
    // 转换成响应式的
    defineReactive(ob.value, key, val)
    // 向target的依赖触发变化通知
    ob.dep.notify()
    return val
}

注：本文章来自于《深入浅出vue.js》（人民邮电出版社）阅读后的笔记整理