function def(obj, key, val, enumerable) {
 Object.defineProperty(obj, key, {
  value: val,
  enumerable: !!enumerable,
  writable: true,
  configurable: true
 })
}

class Observer {
 constructor(value) {
  this.value = value;
  def(value, '__ob__', this);
  if (!Array.isArray(value)) {
   this.walk(value);
  }
 }
 walk(obj) {
  for (const [key, value] of Object.entries(obj)) {
   defineReactive(obj, key, value);
  }
 }
}

function defineReactive(data, key, val) {
 let childOb = observe(val);
 Object.defineProperty(data, key, {
  enumerable: true,
  configurable: true,
  get: function () {
   // 讀取 data[key] 時(shí)觸發(fā)
   console.log('getter', val);
   return val;
  },
  set: function (newVal) {
   // 修改 data[key] 時(shí)觸發(fā)
   console.log('setter', newVal);
   if (val === newVal) {
    return;
   }
   val = newVal;
  }
 })
}

function observe(value, asRootData) {
 if (typeof val !== 'object') {
  return;
 }
 let ob;
 if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
  ob = value.__ob__;
 } else {
  ob = new Observer(val);
 }
 return ob;
}

const people = {
 name: 'c',
 age: 12,
 parents: {
  dad: 'a',
  mom: 'b'
 },
 mates: ['d', 'e']
};
new Observer(people);
people.name; // getter c
people.age++; // getter 12 setter 13
people.parents.dad; // getter {} getter a

const ArrayProto = Array.prototype;
const arrayMethods = Object.create(ArrayProto);
;[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
].forEach(method => {
 const original = ArrayProto[method];
 Object.defineProperty(arrayMethods, method, {
  value: function mutator(...args) {
   console.log('mutator:', this, args);
   return original.apply(this, args);
  },
  enumerable: false,
  writable: true,
  configurable: true
 })
})

class Observer {
 constructor(value) {
  this.value = value;
  def(value, '__ob__', this);
  if (Array.isArray(value)) {
   value.__proto__ = arrayMethods;
  } else {
   this.walk(value);
  }
 }
 walk(obj) {
  for (const [key, value] of Object.entries(obj)) {
   defineReactive(obj, key, value);
  }
 }
}

const people = {
 name: 'c',
 age: 12,
 parents: {
  dad: 'a',
  mom: 'b'
 },
 mates: ['d', 'e']
};
new Observer(people);
people.mates[0]; // getter (2) ["d", "e"]
people.mates.push('f'); // mutator: (2) ["d", "e"] ["f"]

function defineReactive(data, key, val) {
 let childOb = observe(val);
 // 處理每個(gè)響應(yīng)式數(shù)據(jù)時(shí)都創(chuàng)建一個(gè)對(duì)象用來收集依賴
 let dep = new Dep();
 Object.defineProperty(data, key, {
  enumerable: true,
  configurable: true,
  get: function () {
   // 收集依賴
   dep.depend();
   return val;
  },
  set: function (newVal) {
   if (val === newVal) {
    return;
   }
   val = newVal;
   // 通知依賴更新
   dep.notify();
  }
 })
}

class Dep {
 constructor() {
  this.subs = [];
 }
 addSub(sub) {
  this.subs.push(sub);
 }
 removeSub(sub) {
  if (this.subs.length) {
   const index = this.subs.indexOf(sub);
   this.subs.splice(index, 1);
  }
 }
 depend() {
  if (window.target) {
   this.addSub(window.target);
  }
 }
 notify() {
  const subs = this.subs.slice();
  for (let i = 0; i < subs.length; i++) {
   subs[i].update();
  }
 }
}

class Observer {
 constructor(value) {
  this.value = value;
  this.dep = new Dep();
  def(value, '__ob__', this);
  if (Array.isArray(value)) {
   value.__proto__ = arrayMethods;
  } else {
   this.walk(value);
  }
 }
 walk(obj) {
  for (const [key, value] of Object.entries(obj)) {
   defineReactive(obj, key, value);
  }
 }
}

function defineReactive(data, key, val) {
 let childOb = observe(val);
 let dep = new Dep();
 Object.defineProperty(data, key, {
  enumerable: true,
  configurable: true,
  get: function () {
   dep.depend();
   // 給 Observer 實(shí)例上的 dep 屬性收集依賴
   if (childOb) {
    childOb.dep.depend();
   }
   return val;
  },
  ...
 })
}

;[
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
].forEach(method => {
 const original = ArrayProto[method];
 def(arrayMethods, method, (...args) => {
  const result = original.apply(this, args);
  const ob = this.__ob__;
  ob.dep.notify();
  return result;
 })
})

class Watcher {
 constructor(vm, expOrFn, cb) {
  this.vm = vm;
  // 保存通過表達(dá)式獲取數(shù)據(jù)的方法
  this.getter = parsePath(expOrFn);
  this.cb = cb;
  this.value = this.get();
 }
 get() {
  // 將自身 Watcher 實(shí)例掛到全局對(duì)象上
  window.target = this;
  // 獲取表達(dá)式對(duì)應(yīng)的數(shù)據(jù)
  // 會(huì)自動(dòng)觸發(fā)該數(shù)據(jù)的 getter
  // getter 中收集依賴時(shí)從全局對(duì)象上拿到這個(gè) Watcher 實(shí)例
  let value = this.getter.call(this.vm, this.vm);
  window.target = undefined;
  return value;
 }
 update() {
  const oldValue = this.value;
  this.value = this.get();
  // 將舊值與新值傳遞給回調(diào)函數(shù)
  this.cb.call(this.vm, this.value, oldValue);
 }
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>vue3 demo</title>
</head>
<body>
 <div id="app">
  <div id="count"></div>
  <button id="btn">+1</button>
 </div>
 <script src="./vue3.js"></script>
 <script>
  const countEl = document.querySelector('#count')
  const btnEl = document.querySelector('#btn')
  // 定義響應(yīng)式數(shù)據(jù)
  const state = reactive({
   count: 0,
   man: {
    name: 'pan'
   }
  })
  // 定義計(jì)算屬性
  let double = computed(() => {
   return state.count * 2
  })
  // 回調(diào)函數(shù)立即執(zhí)行一次，內(nèi)部使用到的數(shù)據(jù)更新時(shí)會(huì)重新執(zhí)行回調(diào)函數(shù)
  effect(() => {
   countEl.innerHTML = `count is ${state.count}, double is ${double.value}, man's name is ${state.man.name}`
  })
  // 修改響應(yīng)式數(shù)據(jù)觸發(fā)更新
  btnEl.addEventListener('click', () => {
   state.count++
  }, false)
 </script>
</body>
</html>

const toProxy = new WeakMap()
const toRaw = new WeakMap()

const baseHandler = {
 get(target, key) {
  console.log('Get', target, key)
  const res = Reflect.get(target, key)
  // 遞歸尋找
  return typeof res == 'object' ? reactive(res) : res
 },
 set(target, key, val) {
  console.log('Set', target, key, val)
  const res = Reflect.set(target, key, val)
  return res
 }
}
function reactive(target) {
 console.log('reactive', target)
 // 查詢緩存
 let observed = toProxy.get(target)
 if (observed) {
  return observed
 }
 if (toRaw.get(target)) {
  return target
 }
 observed = new Proxy(target, baseHandler)
 // 設(shè)置緩存
 toProxy.set(target, observed)
 toRaw.set(observed, target)
 return observed
}

const baseHandler = {
 get(target, key) {
  const res = Reflect.get(target, key)
  // 收集依賴
  track(target, key)
  return typeof res == 'object' ? reactive(res) : res
 },
 set(target, key, val) {
  const info = {
   oldValue: target[key],
   newValue: val
  }
  const res = Reflect.set(target, key, val)
  // 觸發(fā)更新
  trigger(target, key, info)
  return res
 }
}

const effectStack = []
const targetMap = new WeakMap()

function track(target, key) {
 // 從棧中拿到待收集的依賴對(duì)象
 let effect = effectStack[effectStack.length - 1]
 if (effect) {
  // 通過 target 及 key 從依賴映射表中拿到對(duì)應(yīng)的依賴列表（Set類型）
  // 首次需要對(duì)依賴映射表初始化
  let depsMap = targetMap.get(target)
  if (depsMap === undefined) {
   depsMap = new Map()
   targetMap.set(target, depsMap)
  }
  let dep = depsMap.get(key)
  if (dep === undefined) {
   dep = new Set()
   depsMap.set(key, dep)
  }
  // 若 target.key 對(duì)應(yīng)的依賴列表中不存在該依賴則收集
  if (!dep.has(effect)) {
   dep.add(effect)
  }
 }
}

function trigger(target, key, info) {
 // 依賴映射表中取出 target 相關(guān)數(shù)據(jù)
 const depsMap = targetMap.get(target)
 if (depsMap === undefined) {
  return
 }
 // 普通依賴對(duì)象的列表
 const effects = new Set()
 // 計(jì)算屬性依賴對(duì)象的列表
 const computedRunners = new Set()
 if (key) {
  // 取出 key 相關(guān)的依賴列表遍歷分類存入 effects 及 computedRunners
  let deps = depsMap.get(key)
  deps.forEach(effect => {
   if (effect.computed) {
    computedRunners.add(effect)
   } else {
    effects.add(effect)
   }
  })
 }
 // 遍歷執(zhí)行所有依賴對(duì)象
 const run = effect=> effect()
 effects.forEach(run)
 computedRunners.forEach(run)
}

// 創(chuàng)建依賴對(duì)象
function createReactiveEffect(fn, options) {
 const effect = function effect(...args) {
  return run(effect, fn, args)
 }
 effect.computed = options.computed
 effect.lazy = options.lazy
 return effect
}

function run(effect, fn, args) {
 if (!effectStack.includes(effect)) {
  try {
   effectStack.push(effect)
   return fn(...args)
  } finally {
   effectStack.pop()
  }
 }
}

// 創(chuàng)建依賴對(duì)象并判斷非計(jì)算屬性則立即執(zhí)行
function effect(fn, options = {}) {
 let e = createReactiveEffect(fn, options)
 if (!options.lazy) {
  e()
 }
 return e
}

// computed 內(nèi)部調(diào)用 effect 并添加計(jì)算屬性相關(guān)的 options
function computed(fn) {
 const runner = effect(fn, {
  computed: true,
  lazy: true
 })
 return {
  effect: runner,
  get value() {
   return runner()
  }
 }
}