受现代 JavaScript 的限制 ，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性，那框架本身是如何实现的呢？

源码分析

/**
 * 在Vue全局上挂载set方法，该方法以及下面的del方法常用于 解决 无法通过数组下标改变数据更新视图以及给一个对象添加属性或者删除属性更新视图的 问题
 */
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是一个数组下标
	// 那么执行数组的splice方法，由于Vue重写了splice方法，因此可以触发更新
	if (Array.isArray(target) && isValidArrayIndex(key)) {
		target.length = Math.max(target.length, key);
		target.splice(key, 1, val);
		return val;
	}
	// 判断如果目标是对象，并且key已经存在于这个对象，那么很简单，直接改变该属性就好，自动会触发set方法
	if (key in target && !(key in Object.prototype)) {
		target[key] = val;
		return val;
	}
	const ob = (target: any).__ob__;
	// 这里是禁止向Vue实例或者实例的$data属性身上直接添加属性
	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;
	}
	// 如果是响应式的对象，那么要主动重写这个新的属性的get、set，将其变为响应式
	defineReactive(ob.value, key, val);
	// 并且主动触发一次视图更新
	ob.dep.notify();
	return val;
}