Vue源码分析之响应式原理 ​

Object.defineProperty(obj, prop, descriptor)

const user = {
  name: "小明",
  age: 10
};

function defineReactive(obj: Record<string, any>, key: any) {
  let value = obj[key]
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: true,
    get() {
      console.log('访问属性：', key)
      return value;
    },
    set(newValue) {
      console.log('设置属性', key , '值', newValue)
      value = newValue;
    }
  })
}
Object.keys(user).forEach(k => defineReactive(user, k));

intro = () => console.log(`我的名字：${user.name}，年龄：${user.age}`);

Object.defineProperty(obj, key, {
  configurable: true,
  enumerable: true,
  get() {
    console.log('访问属性：', key)
    return value;
  },
  set(newValue) {
    value = newValue;
    // 设置属性时执行intro方法
    intro();
  }
})

// 省略部分代码
const cbs = [];

// 添加待执行的方法
cbs.push(intro);

// Object.defineProperty
set(newValue) {
	value = newValue;
	// 现在设置值时，只需要将cbs里的方法执行一遍
	cbs.forEach(cb => cb());
}

const user = {
  name: "小明",
  age: 10,
};
Object.keys(user).forEach(k => defineReactive(user, k));

const p1 = () => console.log(`【people1】名字：${user.name}`);
const p2 = () => console.log(`【people2】名字：${user.name}，年龄：${user.age}`);
const cbs: Set<Function> = new Set(); 
// 当前正在运行的函数
let activeFn: Function | null = null; 
activeFn = p1; 
p1(); 
user.name = '小王'; 
activeFn = p2; 
p2(); 

function defineReactive(obj: Record<string, any>, key: any) {
  let value = obj[key]
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: true,
    get() {
	  // 收集当前正在执行的函数
      cbs.add(activeFn!); 
      console.log('get log: 访问属性 ', key, '当前activeFn为 ', activeFn?.name);
      return value;
    },
    set(newValue) {
      value = newValue;
      console.log('set log: 设置属性 ', key, '当前activeFn为 ', activeFn?.name);
      cbs.forEach(cb => cb());
    }
  })
}

const cbs: Set<Function> = new Set(); 
const cbs: Map<string, Set<Function>> = new Map(); 

function defineReactives(obj: Record<string, any>, key: any) {
  let value = obj[key]
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: true,
    get() {
      cbs.add(activeFn!); 
      if (!cbs.has(key)) { 
        cbs.set(key, new Set()); 
      } 
      const deps = cbs.get(key) 
      deps?.add(activeFn!); 
      console.log('get log: 访问属性 ', key, '当前activeFn为 ', activeFn?.name)
      return value;
    },
    set(newValue) {
      value = newValue;
      console.log('set log: 设置属性 ', key, '当前activeFn为 ', activeFn?.name)
      cbs.forEach(cb => cb()); 
      const deps = cbs.get(key) 
      deps?.forEach(dep => dep()) 
    }
  })
}

// 步骤：initData => observe => defineReactive => dep => watcher => update => render

// 渲染函数，把它当成vue的组件render函数
function render(renderFn: Function) {
  const watcher = renderFn.watcher || new Watcher(renderFn);
  if (!renderFn.watcher) {
    renderFn.watcher = watcher;
  }
  Dep.target = watcher;

  renderFn();
  Dep.target = null;
}

// 每个组件渲染函数都有一个watcher，watcher中包含了被dep收集的所有dep
class Watcher {
  deps: Set<Dep>;
  cb: Function;

  constructor(cb: Function) {
    this.deps = new Set();
    this.cb = cb;
  }

  addDep(dep: Dep) {
    this.deps.add(dep)
    dep.addSub(this);
  }

  update () {
    this.cb?.();
  }
}

// 每个属性都有自己的Dep对象，用来收集watcher，当值变化时通知所有的watcher进行更新
class Dep {
  static target: Watcher | null;
  subs: Array<Watcher>;

  constructor() {
    this.subs = [];
  }

  addSub(sub: Watcher) {
    if (this.subs.includes(sub)) return;
    this.subs.push(sub);
  }

  depend() {
    if (Dep.target) {
      Dep.target.addDep(this);
    }
  }

  notify() {
    for (let i = 0, l = this.subs.length; i < l; i++) {
      this.subs[i].update();
    }
  }
}
Dep.target = null

// 拦截对象入口
function observe(value: any) {
  if (typeof value !== "object") return;
  // 保证只会生成一次
  return new Observer(value) || value.__ob__;
}

// 使用Observer对象用来标识当前属性已经被拦截了，也就是有了dep对象
class Observer {
  dep: Dep;
  constructor(value: any) {
    this.dep = new Dep();
    const self = this;
    Object.defineProperty(value, "__ob__", {
      configurable: false,
      get() {
        return self;
      },
    });
    this.walk(value);
  }

  // 深度遍历对象
  walk(value: any) {
    if (Object.prototype.toString.call(value) === "[object Object]") {
      Object.keys(value).forEach((k) => {
        defineReactive(value, k);
      });
    }
  }
}

// 待拦截的对象，支持深度嵌套
const user = {
  name: "小明",
  age: 10,
  friends: {
    total: 3,
  }
};

// 响应式核心
function defineReactive(obj: Record<string, any>, k: string) {
  let val: any = null;
  const getter = Object.getOwnPropertyDescriptor(obj, k)?.get;
  const setter = Object.getOwnPropertyDescriptor(obj, k)?.set;
  if (!getter) {
    val = obj[k];
  }

  // 每个被observe过的对象都会有一个 闭包 dep对象，并且有一个`__ob__`属性
  const dep = new Dep();
  observe(val);
  Object.defineProperty(obj, k, {
    enumerable: true,
    configurable: true,
    get() {
      if (Dep.target) {
        dep.depend();
      }
      return getter ? getter.call(obj) : val;
    },
    set(newVal) {
      if (!setter) {
        val = newVal;
      } else {
        setter.call(obj, newVal);
      }
      dep.notify();
    },
  });
}
// render前先对 user 对象进行拦截
observe(user)

// 模拟每个组件的真实渲染数据
let page1 = () => console.log(`页面1： =====> 我的名字：${user.name}，年龄：${user.age}`);
let page2 = () => console.log(`页面2： =====> 年龄：${user.age}，我有${user.friends.total}朋友`);
let page3 = () => console.log(`页面3： =====> 我的名字：${user.name}，我有${user.friends.total}朋友`);

// 模拟vue的组件递归渲染
render(page1)
user.name = "小李";
render(page2)
user.name = "校长";
render(page3)

// src/core/instance/init 57行
Vue.prototype._init = function (options?: Object) {
  const vm: Component = this;
  // 省略一大堆代码...
  initState(vm);
}
// src/core/instance/state 54行
export function initState(vm: Component) {
  const opts = vm.$options;
  if (opts.data) {
    initData(vm);
  }
}
// src/core/instance/state 114行
function initData(vm: Component) {
  let data = vm.$options.data;
  data = vm._data = typeof data === "function" ? getData(data, vm) : data || {};

  // 观测观测组件data，也就是进行setter、getter拦截
  observe(data, true /* asRootData */);
}

// src/core/observer/index 110行
export function observe(value: any, asRootData: ?boolean): Observer | void {
  return new Observer(value);
}

// src/core/observer/index 37行
export class Observer {
  constructor(value: any) {
    this.dep = new Dep();
    def(value, "__ob__", this);
    this.walk(value);
  }

  // 深度遍历对象
  walk(obj: Object) {
    const keys = Object.keys(obj);
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i]);
    }
  }
  // ....
}

// src/core/observer/index 135行
export function defineReactive(
  obj: Object,
  key: string,
  val: any,
) {
  const dep = new Dep();

  const property = Object.getOwnPropertyDescriptor(obj, key);

  // cater for pre-defined getter/setters
  const getter = property && property.get;
  const setter = property && property.set;

  let childOb = !shallow && observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      const value = getter ? getter.call(obj) : val;

      // 收集watcher
      if (Dep.target) {
        dep.depend();
      }
      return value;
    },
    set: function reactiveSetter(newVal) {
      const value = getter ? getter.call(obj) : val;
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return;
      }
      if (setter) {
        setter.call(obj, newVal);
      } else {
        val = newVal;
      }
      childOb = !shallow && observe(newVal);
      // 通知更新
      dep.notify();
    },
  });
}

// src/core/observer/dep
// Dep的实现很简单，省略了部分代码
export default class Dep {
  // 全局唯一激活的 Watcher
  static target: ?Watcher;
  // 用来存放 存放了当前Dep的 所有watcher
  subs: Array<Watcher>;

  addSub(sub: Watcher) {
    this.subs.push(sub);
  }

  // 收集依赖
  // Dep.Watcher会添加当前的Dep
  // 同时Watcher的addDep也会执行Dep的addSub将watcher添加到当前Dep（看Watcher方法）
  depend() {
    if (Dep.target) {
      Dep.target.addDep(this);
    }
  }

  // 派发更新，对象的属性值改变时会通过自己的dep.notify通知所有的watcher执行update
  notify() {
    for (let i = 0, l = this.subs.length; i < l; i++) {
      this.subs[i].update();
    }
  }
}

// 这里是用来设置当前的watcher，dep和watcher进行联系的桥梁
Dep.target = null; 当前的watcher
const targetStack = []; 维护wather栈结构
// 进栈、设置当前watcher 
export function pushTarget(target: ?Watcher) { 
  targetStack.push(target); 
  Dep.target = target; 
} 
// 出栈、当前watcher为栈最后一个
export function popTarget() { 
  targetStack.pop(); 
  Dep.target = targetStack[targetStack.length - 1]; 
} 

// 执行了$mount才会真正的进行页面渲染（或者el参数不为空）
new Vue({ render: h => h('div') }).$mount("#app")

// $mount => 模板编译(compiler-runtime) => mountComponent => render => createElement(VNode，此过程会获取当前组件数据，触发对象的getter对当前渲染watcher进行收集) => patch

// src/platforms/web/entry-runtime-with-compiler 20行
const mount = Vue.prototype.$mount;
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el);

  const options = this.$options;
  
  // 用户没有提供 render 函数时，根据提供的template/el 的innerHTML 模板进行编译，最后生成 render函数
  if (!options.render) {
    let template = options.template;
    if (template) {
      if (typeof template === "string") {
        if (template.charAt(0) === "#") {
          template = idToTemplate(template);
        }
      } else if (template.nodeType) {
        template = template.innerHTML;
      } else {
        return this;
      }
    } else if (el) {
      template = getOuterHTML(el);
    }
    if (template) {
      // 模板编译 生成 render 函数
      const { render, staticRenderFns } = compileToFunctions(
        template,
        {
          outputSourceRange: process.env.NODE_ENV !== "production",
          shouldDecodeNewlines,
          shouldDecodeNewlinesForHref,
          delimiters: options.delimiters,
          comments: options.comments,
        },
        this
      );
      // 将 render 函数赋值给 当前示例的render属性
      options.render = render;
      options.staticRenderFns = staticRenderFns;
    }
  }
  // 最后执行mount
  return mount.call(this, el, hydrating);
};

// src/platforms/web/runtime/index 37行
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined;
  // 执行mount真正执行的函数 mountComponent
  return mountComponent(this, el, hydrating);
};

// src/core/instance/lifecycle.js 141行
export function mountComponent(
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el;

  let updateComponent;
  // 这个函数很重要，当组件的data更新时通知渲染watcher更新，watcher会再次执行当前函数
  // 这里只需知道：
  //     1. render函数会生成vnode此过程会获取到对应的对象就会触发getter
  //     2. update用来将新的vnode渲染成dom
  updateComponent = () => {
    vm._update(vm._render(), hydrating);
  };

  // 创建组件的渲染watcher，这里是最外层的watcher
  new Watcher(
    vm,
    updateComponent, // watcher更新时会触发
    noop,
    {
      before() {
        if (vm._isMounted && !vm._isDestroyed) {
          callHook(vm, "beforeUpdate");
        }
      },
    },
    true /* isRenderWatcher */
  );
}

// src/core/observer/watcher
// 部分代码省略...
export default class Watcher {
  vm: Component;
  cb: Function;

  // expOrFn是外面传进来的 updateComponent 也就会重新页面渲染
  constructor(vm: Component, expOrFn: string | Function, cb: Function) {
    this.vm = vm;
    vm._watchers.push(this);
    this.cb = cb;
    this.active = true;
    this.deps = [];
    this.newDeps = [];
    this.depIds = new Set();
    this.newDepIds = new Set();
    if (typeof expOrFn === "function") {
      // getter 变成了 updateComponent
      this.getter = expOrFn;
    }
    // 执行get方法
    this.value = this.get();
  }

  get() {
  	// 设置当前watcher
    pushTarget(this);
    let value;
    const vm = this.vm;
    // 注意这里 执行 updateComponent 方法
    // updateComponent 就会执行 render函数，其在生成vnode的过程中
    // 会访问组件实例vm中的数据，此时就会触发对象的getter进行依赖收集
    // 收集的就是 Dep.target, 也就是当前的 watcher 
    value = this.getter.call(vm, vm);
    popTarget(); // 执行完后，复原Dep.Watcher
    this.cleanupDeps();
    return value;
  }

  // 依赖收集时，dep.depend 会执行当前watcher的addDep 将对象的dep添加进去
  // 同时将自己添加到dep中，两者是多对多的关系
  // 其实每次添加有个去重的关系，主要是为了避免不必要的渲染，如v-if为false时，页面也没必要渲染，这里不展开讲了
  addDep(dep: Dep) {
    const id = dep.id;
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id);
      this.newDeps.push(dep);
      if (!this.depIds.has(id)) {
        dep.addSub(this);
      }
    }
  }

  // 当用户在页面改变值或者其他方法改变某个数据的值时，就会触发对象的setter
  // dep.notify会执行watcher的update方法
  // 这里只看 queueWatcher，其也就是vue的 异步批量更新 方法，最终会执行watcher的 run方法
  update() {
  	// 省略...
    queueWatcher(this);
  }

  // queueWatcher 中会执行此方法，这里只要知道会执行 get 方法即可
  // 而get会执行 updateComponent 也就是触发render、patch重新渲染页面
  run() {
  	// 省略部分代码...
    const value = this.get();
  }
}

// 改变friends 结构，添加 intro 新方法
const user = {
  name: "小明",
  friends: ["小红", "小李"]
};
const intro = () => console.log(`我的名字：${user.name}，我的朋友：${user.friends?.join("、")}`);
render(intro);

// 当分别改变 name 和 friends 的值时，只有name改变才会重新执行 intro
user.name = '鲁班七号';
user.friends.push('小卫');

// src/core/observer/index
export class Observer {
  constructor(value: any) {
    this.value = value;
    this.dep = new Dep();
    // 处理数组
    if (Array.isArray(value)) { 
      // 这里就是改写 array 的原型方法，具体的方法在 arrayMethods中，这里就是替换这个值的原型，而不是Array整体原型
      if (hasProto) { 
        protoAugment(value, arrayMethods); 
      } else { 
        copyAugment(value, arrayMethods, arrayKeys); 
      } 
      this.observeArray(value); 
    } 
    // 上面我们只说了这里，用来处理嵌套对象
    this.walk(value);
  }

  // 如果数据中的数据是对象 对每个对象拦截
  observeArray(items: Array<any>) { 
    for (let i = 0, l = items.length; i < l; i++) { 
      observe(items[i]); 
    } 
  } 
}

// src/core/observer/array
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

// 待改写的方法
const methodsToPatch = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort','reverse']

methodsToPatch.forEach(function (method) {
  // 原始方法
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
  	// 通过原始方法拿到结果
    const result = original.apply(this, args)
    // 获取当前数组的dep
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 如果是 新增 数据时，对新增的数据再进行 观察，因为新增的值可能是对象
    if (inserted) ob.observeArray(inserted)
    
    // 然后通知更新，这是关键，这里ob是自己的ob，在getter中就是childOb
    ob.dep.notify()
    return result
  })
})

user = {
	friends: [1, 2, 3]
}

// 数组改写方法中通过this拿到ob，__ob__就是Observer对象
const ob = this.__ob__

export class Observer {
  constructor(value: any) {
    this.value = value;
    this.dep = new Dep();
    // 这里每个值都会生成自己的ob，也可以通过 value.__ob__获取到
    def(value, "__ob__", this);
  }
}

export function defineReactive(obj: Object, key: string) {
	// 省略....
	// 这里对值继续进行oberve，当是数组时在Observer中就会对数组进行改写
  let childOb = !shallow && observe(val); 
  Object.defineProperty(obj, key, {
    get: function reactiveGetter() {
      if (Dep.target) {
        dep.depend();
        if (childOb) { 
        	// 这里是关键，当访问某个属性时，如果当前属性时数组，那么就会通过他自己的
        	// ob中的dep进行依赖收集，你可以认为这里就是为数组准备的
          childOb.dep.depend(); 
          if (Array.isArray(value)) { 
            dependArray(value); 
          }
        }
      }
      return value;
    },
    set: function reactiveSetter(newVal) {
    	// 属性值改变时对新的值重新进行观测，并改变childOb
      childOb = !shallow && observe(newVal); 
    },
  });
}

class Observer {
  constructor(value: any) {
  	// 处理数组，改写原型方法
    if (Array.isArray(value)) { 
      Object.setPrototypeOf(value, arrayMethods) 
      this.observeArray(value); 
    } else { 
      this.walk(value); 
    } 
  }

  observeArray(items: Array<any>) { 
    for (let i = 0, l = items.length; i < l; i++) { 
      observe(items[i]); 
    } 
  } 

  // 省略其他...
}

const arrayProto = Array.prototype 
export const arrayMethods = Object.create(arrayProto) 
const methodsToPatch = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort','reverse'] 

methodsToPatch.forEach(function (method) { 
  const original = arrayProto[method as any]; 
  Object.defineProperty(arrayMethods, method, { 
    value(...args: any) { 
      const result = original.apply(this, args) 
      const ob = this.__ob__ 
      let inserted 
      switch (method) { 
        case 'push': 
        case 'unshift': 
          inserted = args 
          break 
        case 'splice': 
          inserted = args.slice(2) 
          break 
      } 
      if (inserted) ob.observeArray(inserted) 
      ob.dep.notify() 
      return result 
    } 
  }) 
}) 

function defineReactive(obj: Record<string, any>, k: string) {
  const childOb = observe(val);
  Object.defineProperty(obj, k, {
    get() {
      if (Dep.target) {
        dep.depend();
        if (childOb) { 
          childOb.dep.depend(); 
        } 
      }
      return getter ? getter.call(obj) : val;
    }
  });
}

export function set(target: Array<any> | Object, key: any, val: any): any {
  // 目标对象是 数组时，那么key就是索引， 判断索引是否合法，最终还是调用了 splice方法
  // 所以 this.$set(arr, 2, 'something') 本质还是调用了splice方法，当然这个方法已经改写了
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val;
  }
  // 如果目标不是数组对象
  // 若key已经存在了，直接返回啥都不做
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  const ob = (target as any).__ob__;
  // 目标对象没有__ob__证明不是响应式对象，直接返回不做处理
  if (!ob) {
    target[key] = val;
    return val;
  }
  // 主动将key属性变成响应式，触发依赖收集
  defineReactive(ob.value, key, val);
  // 通知更新
  ob.dep.notify();
  return val;
}

// 源对象
const user = {
  name: "小明",
  age: 10
}

// 代理对象
const proxyUser = new Proxy(user, {
  get(target, key, receiver) {
    console.log("访问了：", key);
    return Reflect.get(target, key, receiver);
  },
  set(target: any, key, newValue, receiver) {
    console.log(`设置 ${key.toString()} 的值由 ${target[key]} 改为 ${newValue}`);
    return Reflect.set(target, key, newValue, receiver);
  }
});

// 当前正在运行的函数
let activeEffect: null | Function;
// 副作用函数用来修改 activeEffect 的值
function effect(fn: Function) {
  activeEffect = fn;
  // 主动执行一次，函数内部访问对象属性时就会触发依赖收集
  fn();
  activeEffect = null;
}
// 依赖收集集合
const targetMap = new WeakMap<any, Map<string, Set<Function>>>();
// 收集依赖
function track(target: any, key: string) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()));
    }
    let dep = depsMap.get(key);
    if (!dep) {
      depsMap.set(key, (dep = new Set()))
    }
    // 将当前的 activeEffect 添加到当前 属性的依赖里
    dep?.add(activeEffect);
  }
}

// 派发更新
function trigger(target: any, key: string) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const deps = depsMap.get(key);
  // 获取当前 属性 的所有依赖，执行他们
  deps?.forEach(dep => dep?.())
}

// 拦截对象的get/set等等
function reactive(target: Record<string, any>) {
  return new Proxy(target, {
    get(target, key: string, receiver) {
      const result = Reflect.get(target, key, receiver);
      // 收集依赖
      track(target, key);
      return result;
    },
    set(target, key: string, newValue, receiver) {
      const oldValue = target[key];
      // 值一样直接返回
      if (oldValue === newValue) return true;
      const result = Reflect.set(target, key, newValue, receiver);
      // 出发当前key依赖更新
      trigger(target, key);
      return result;
    },
  });
}

const user = reactive({
  name: "小明",
  age: 10,
});
// p1
effect(() => console.log(`p1：我的名字：${user.name}，年龄：${user.age}`));
// p2
effect(() => console.log(`p2：年龄：${user.age}`));