Vue源码系列-5- Vue.set() 使用场景以及实现原理?

官方api解释了它的使用场景

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’)

所以我们要知道，只有先定义在data 里 数据才具有响应式，如果自己后添加的属性是不具备响应式的
比如下边这个 属性a 具有响应式，但是b 就不会，如果你想让这个b 具有响应式
你可以使用 Vue.set(this.model, “b”, 20 ) 这样写使他具有响应式，
还有就是修改数组的某个值, 你直接通过索引的这种方式修改是不可以的，
但是你如果使用数组的 增删改查，排序，反转 方法 是会触发视图更新的，因为Vue内部重写了这些方法，并定义了响应式

new Vue({
	data(){
 		return {
 			list: [1, 2, 3, 4]
			model:{
				a: 10
			}
		}
	}
})
mounted(){
	this.list[0] = 5;
	this.model.b = 20;
}

那么， 接着来看看 set 方法是怎么做的

src/core/observer/index.js

export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  /**
  	* 这里判断你传入是数组，并且key 满足是数组的索引
	*/
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
    /**
  	* 这里判断你传入的是个对象，那就直接赋值操作，最后再调用
  	* defineReactive(ob.value, key, val)方法
	*/
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  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.'
    )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  // 调用 notify()方法，通知更新
  ob.dep.notify()
  return val
}

src/core/shared/util.js
isValidArrayIndex（）就是判断是否满足是索引

/**
 * Check if val is a valid array index.
 */
export function isValidArrayIndex (val: any): boolean {
  const n = parseFloat(String(val))
  return n >= 0 && Math.floor(n) === n && isFinite(val)
}

这段代码可以看出来，调用这个方法，传入3个参数（target， key ，val），返回值就是最后传入的 val
这个方法内部做了3件事（原理也比较好理解）：

1. 判断是数组的情况 并且满足是数组的索引, 最后通过 splice()方法来处理是增加一条数据还是 修改某个索引的数据（所以你如果不想用set，直接使用这个方法也是可以修改数组的数据的，并且具有响应式）
2. 判断是对象的情况, 直接通过 target[key] = val 来添加属性或者修改属性对应的值， 接着再调用 defineReactive(ob.value, key, val)，给新添加的属性再重新定义响应式
3. 最后调用 notify() 方法触发更新操作