相关结论
先抛出一个问题，$set后数据是响应式的吗？
要更改的数据源
- 是数组时，只是触发视图更新,是由响应式原理决定的；
Vue.$set(this.$obj, 'prop', [])
this.$obj.prop[1] = 'cq'
- 对对象来说，是响应式的，会调用 defineReactive 方法进行响应式处理；
Vue.$set(this.$obj, 'prop', { addr: 'hz' })
this.$obj.prop.addr = 'cq'
- 对基本数据来说，响应式；
Vue.$set(this.$obj, 'prop', 'wanghaha')
this.$obj.prop = 'wangxixi'
参数：
{Object | Array} target
{string | number} propertyName/index
{any} value
- 给对象和数组本身都增加了dep属性
- 当给对象新增不存在的属性则触发对象依赖的watcher去更新
- 当修改数组索引时，我们调用数组本身的splice去更新数组（数组的响应式原理就是重新了splice等方法，调用splice就会触发视图更新）
以下方法调用会改变原始数组：push(), pop(), shift(), unshift(), splice(), sort(), reverse(),Vue.set( target, key, value )
调用方法：Vue.set(target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值
<div id="app">{{user.name}} {{user.age}}</div>
<div id="app"></div>
<script>
// 1. 依赖收集的特点：给每个属性都增加一个dep属性，dep属性会进行收集，收集的是watcher
// 2. vue会给每个对象也增加一个dep属性`在这里插入代码片`
const vm = new Vue({
el: '#app',
data: { // vm._data
user: {name:'poetry'}
}
});
// 对象的话：调用defineReactive在user对象上定义一个age属性，增加到响应式数据中，触发对象本身的watcher，ob.dep.notify()更新
// 如果是数组 通过调用 splice方法，触发视图更新
vm.$set(vm.user, 'age', 20); // 不能给根属性添加，因为给根添加属性 性能消耗太大，需要做很多处理
// 修改肯定是同步的 -> 更新都是一步的 queuewatcher
</script>
相关源码
// src/core/observer/index.js 44
export class Observer { // new Observer(value)
value: any;
dep: Dep;
vmCount: number; // number of vms that have this object as root $data
constructor (value: any) {
this.value = value
this.dep = new Dep() // 给所有对象类型增加dep属性
}
}
// src/core/observer/index.js 201
export function set (target: Array<any> | Object, key: any, val: any): any {
// 1.是开发环境 target 没定义或者是基础类型则报错
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
// 2.如果是数组 Vue.set(array,1,100); 调用我们重写的splice方法 (这样可以更新视图)
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key)
// 利用数组的splice变异方法触发响应式
target.splice(key, 1, val)
return val
}
// 3.如果是对象本身的属性，则直接添加即可
if (key in target && !(key in Object.prototype)) {
target[key] = val // 直接修改属性值
return val
}
// 4.如果是Vue实例 或 根数据data时 报错,（更新_data 无意义）
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
}
// 5.如果不是响应式的也不需要将其定义成响应式属性
if (!ob) {
target[key] = val
return val
}
// 6.将属性定义成响应式的
defineReactive(ob.value, key, val)
// 通知视图更新
ob.dep.notify()
return val
}
我们阅读以上源码可知，vm.$set 的实现原理是：
如果目标是数组，直接使用数组的 splice 方法触发响应式；
如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）
关于数组的响应式处理
vue 改写了数组的七个方法：push、pop、shift、unshift、splice、sort、reverse。使数组改变的时候能够触发响应式，先把原来的 Array.prototype 的方法备份一份，再进行重写。
vue 的数组响应式是如何实现的？
以 Array.prototype 为原型，创建了一个 arrayMethods 的对象（ Object.create（Array.prototype） ），然后使用了一个强硬的手段，es6的语法，Object.setPrototypeOf(obj, arrayMethods)，强制的让 数组 的原型 __proto__指向了 arrayMethods，这样就会触发重写的数组方法。
文件目录：
index.js
import observe from './observe';
let obj = {
a: {
m: {
n: {
e: {
f: 5
}
}
}
},
b: 3,
g: [1,2,3]
};
observe(obj);
obj.g.splice(2,1,88);
console.log(obj.g);
observe.js
import Observer from './Observer.js';
// 创建 observe 函数，注意函数的名字没有r
export default function observe (value) {
// 函数只为对象服务
if (typeof value !== 'object') return;
// 定义 ob
let ob;
if (typeof value.__ob__ !== 'undefined') {
ob = value.__ob__;
} else {
ob = new Observer(value);
}
return ob;
}
Observer.js
import { def } from './utils.js';
import defineReactive from './defineReactive.js';
import { arrayMethods } from './array.js';
import observe from './observe.js';
export default class Observer {
constructor(value) {
// 给实例(构造函数中的this表示实例)添加了__ob__属性
def(value, '__ob__', this, false);
// Observer类的目的是：将一个正常的 object 转换为每个层级的属性都是响应式（可以被侦测的）的 object
// 检查是数组还是对象
if (Array.isArray(value)) {
// 如果是数组，就要将这个数组的原型指向 arrayMethods
Object.setPrototypeOf(value, arrayMethods);
this.observeArray(value);
} else {
this.walk(value);
}
}
// 遍历
walk(value) {
for (let key in value) {
defineReactive(value, key);
}
}
// 数组的特殊遍历
observeArray(arr) {
for(let i = 0; i < arr.length; i++) {
// 逐项进行 observe
observe(arr[i]);
}
}
}
array.js
import { def } from './utils';
const arrayPrototype = Array.prototype;
// 以 Array.prototype 为原型创建 arrayMethods 对象
export const arrayMethods = Object.create(arrayPrototype);
// 要被改写的七个方法
const methodsNeedChange = [
'push',
'pop',
'shift',
'unshift',
'sort',
'reverse',
'splice',
];
methodsNeedChange.forEach(item => {
// 备份原来的方法，原有功能不能被剥夺
const original = arrayPrototype[item];
// 定义新的方法
def(arrayMethods, item, function() {
// 恢复原来的功能，this代表调用该方法的数组，arguments就是push的内容
const result = original.apply(this, arguments);
// 将类数组转换为数组
const args = [...arguments];
// 把这个数组身上的__ob__取出来，__ob__已经被添加了
// 为什么已经被添加了？
// 因为数组肯定不是最高层，比如 obj.g 属性是数组，obj不能是数组，
// 第一次遍历 obj 这个对象的第一层的时候，已经给 g 属性添加了 __ob__属性。
const ob = this.__ob__;
// 有三种方法 push、unshift、splice 能够插入新项，现在要把插入的新项也变为 observe 的
let inserted = [];
switch(item) {
case 'push':
case 'unshift':
// push(新项) unshift(插入的新项)
inserted = arguments;
break;
case 'splice':
// slice(下标，数量，插入的新项)
inserted = args.slice(2);
break;
}
// 让插入的新项也变成响应的
if (inserted) {
ob.observeArray(inserted);
}
console.log('啦啦啦');
return result;
}, false);
});
defineReactive.js
import observe from './observe';
export default function defineReactive(data, key, val) {
if (arguments.length == 2) {
val = data[key];
}
// 子元素要进行 observe, 至此形成了递归，
// 这个递归不是函数自己调用自己
let childOb = observe(val);
Object.defineProperty(data, key, {
// 可枚举
emuerable: true,
// 可以被配置，比如可以被 delete
configurable: true,
get() {
console.log(`正在访问${key}属性`, val);
return val;
},
set(newValue) {
console.log(`正在改变${key}属性`, newValue);
if (val === newValue) { return };
val = newValue;
// 当设置了新值，新值也要 observe
childOb = observe(newValue);
}
})
}
utils.js
export const def = function(obj, key, value, emurable) {
Object.defineProperty(obj, key, {
value,
emurable,
writable: true,
configurable: true
})
}
