2022-07-13发表2022-07-13更新javascript / vue / 算法几秒读完 (大约0个字)

快速diff

2022-07-13发表2022-08-29更新javascript / vue1 分钟读完 (大约119个字)

vue的路由实现原理

vue 中的路由模式有两种： history 和 hash

hash

2022-07-08发表2022-07-11更新javascript / vue17 分钟读完 (大约2476个字)

响应系统的作用与实现-2

回顾上篇文章响应系统的作用与实现-1，完成的代码：

function track(target, key) {
  let depsMap = bucket.get(target);
  if (!depsMap) {
    bucket.set(target, (depsMap = new Map()));
  }
  let effectFns = depsMap.get(key);
  if (!effectFns) {
    depsMap.set(key, (effectFns = new Set()));
  }
  effectFns.add(activeEffect);
}

function trigger(target, key) {
  const depsMap = bucket.get(target);
  if (depsMap) {
    const effectFns = depsMap.get(key);
    effectFns && effectFns.forEach((fn) => fn());
  }
}

let activeEffect = null;
const bucket = new WeakMap();
function effect(fn) {
  activeEffect = fn;
  fn();
}
const proxy = new Proxy(obj, {
  get(target, key) {
    if (!activeEffect) {
      return target[key];
    }
    track(target, key);
    return target[key];
  },
  set(target, key, newValue) {
    target[key] = newValue;
    trigger(target, key);
    return true;
  },
});