『Vue.js设计与实现』読書メモ

import { h } from 'vue'

export default {
  render() {
    return h('h1', { onClick: handler }) // 仮想 DOM
  }
}

Virtual DOM h('div', 'hello') -> renderer -> Real DOM

const vnode = {
  tag: 'div',
  props: {
    onClick: () => alert('hello')
  },
  children: 'click me'
}

function renderer(vnode, container) {
  // vnode.tag により DOM 要素を作成する
  const el = document.createElement(vnode.tag)

  // vnode.props を走査して属性やイベントを作成し DOM 要素にアタッチする
  for (const key in vnode.props) {
    if (/^on/.test(key)) {
      // key が on で始まっていればイベントである
      el.addEventListener(
        key.substr(2).toLowerCase(), // onClick ---> click
        vnode.props[key] // イベントハンドラ
      )
    }
  }

  // 子要素を処理する
  if (typeof vnode.children === 'string') {
    // children が文字列であれば要素のテキストノードとする
    el.appendChild(document.createTextNode(vnode.children))
  } else if (Array.isArray(vnode.children)) {
    // renderer 関数を再帰的に呼び出し、el をマウントポイントとして子ノードをレンダリングする
    vnode.children.forEach(child => renderer(child, el))
  }

  // 要素をマウントする
  container.appendChild(el)
}

const MyComponent = function () {
  return {
    tag: 'div',
    props: {
      onClick: () => alert('hello')
    },
    children: 'click me'
  }
}

const MyComponent = {
  render() {
    return {
      tag: 'div',
      props: {
        onClick: () => alert('hello')
      },
      children: 'click me'
    }
  }
}

<div @click="handler">
  click me
</div>

render() {
  return h('div', { onClick: handler }, 'click me')
}

const obj = { text: 'hello world' }
function effect() {
   document.body.innerText = obj.text
}

obj.text = 'hello vue3'

// 副作用をもつ関数を保存する bucket
const bucket = new Set()

// オリジナルのデータ
const data = { text: 'hello world' }
// データに対する Proxy
const obj = new Proxy(data, {
  // 読み取り操作に対するインターセプト
  get(target, key) {
    // 副作用をもつ関数 effect を bucket に登録する
    bucket.add(effect)
    // プロパティの値を返す
    return target[key]
  },
  // 書き込み操作に対するインターセプト
  set(target, key, newVal) {
    // プロパティの値をセットする
    target[key] = newVal
    // bucket から関数を取り出し実行する
    bucket.forEach(fn => fn())
  }
})

function effect() {
  document.body.innerText = obj.text
}
effect() // 読み取り操作
setTimeout(() => {
  obj.text = 'hello vue3' // 書き込み操作
}, 1000)

let activeEffect
function effect(fn) {
  activeEffect = fn
  fn()
}

const bucket = new WeakMap()

const data = { text: 'hello world' }
const obj = new Proxy(data, {
  get(target, key) {
    let depsMap = bucket.get(target)
    if (!depsMap) {
      bucket.set(target, (depsMap = new Map()))
    }
    let deps = depsMap.get(key)
    if (!deps) {
      depsMap.set(key, (deps = new Set()))
    }
    deps.add(activeEffect)
    return target[key]
  },
  set(target, key, newVal) {
    target[key] = newVal
    const depsMap = bucket.get(target)
    if (!depsMap) return
    const effects = depsMap.get(key)
    effects && effects.forEach(fn => fn())
  }
})

const obj = new Proxy(data, {
  get(target, key) {
    track(target, key)
    return target[key]
  },
  set(target, key, newVal) {
    target[key] = newVal
    trigger(target, key)
  }
})

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

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

const data = { ok: true, text: 'hello world' }
const obj = new Proxy(data, { /* ... */ })

effect(function effectFn() {
  document.body.innerText = obj.ok ? obj.text : 'not'
})

let activeEffect
function effect(fn) {
  const effectFn = () => {
    activeEffect = effectFn
    fn()
  }
  // この関数と関連する Set を保存するための配列を用意する
  effectFn.deps = []
  effectFn()
}

function track(target, key) {
  let depsMap = bucket.get(target)
  if (!depsMap) {
    bucket.set(target, (depsMap = new Map()))
  }
  let deps = depsMap.get(key)
  if (!deps) {
    depsMap.set(key, (deps = new Set()))
  }
  deps.add(activeEffect)
  activeEffect.deps.push(deps) // 追加: deps を追加する
}

let activeEffect
function effect(fn) {
  const effectFn = () => {
    cleanup(effectFn) // 追加
    activeEffect = effectFn
    fn()
  }
  effectFn.deps = []
  effectFn()
}

function cleanup(effectFn) {
  // 各 Set を走査する
  for (let i = 0; i < effectFn.deps.length; i++) {
    // effectFn を要素とする Set
    const deps = effectFn.deps[i]
    // effectFn を Set から削除する
    deps.delete(effectFn)
  }
  // effectFn.deps をクリアする
  effectFn.deps.length = 0
}

function trigger(target, key) {
  const depsMap = bucket.get(target)
  if (!depsMap) return
  const effects = depsMap.get(key)
  effects && effects.forEach(fn => fn()) // 問題となる行
}

const set = new Set([1])

set.forEach(item => {
  set.delete(1)
  set.add(1)
  console.log('loop')
})

function trigger(target, key) {
  const depsMap = bucket.get(target)
  if (!depsMap) return
  const effects = depsMap.get(key)
  const effectsToRun = new Set(effects) // 追加
  effectsToRun.forEach(effectFn => effectFn()) // 追加
  // effects && effects.forEach(fn => fn())
}

let activeEffect
// effect スタック
const effectStack = []
function effect(fn) {
  const effectFn = () => {
    cleanup(effectFn)
    activeEffect = effectFn
    effectStack.push(effectFn) // 追加
    fn()
    effectStack.pop() // 追加
    activeEffect = effectStack[effectStack.length - 1] // 追加
  }
  effectFn.deps = []
  effectFn()
}

const data = { foo: 1 }
const obj = new Proxy(data, { /* ... */ })
effect(()=> {
  obj.foo = obj.foo + 1
})

function trigger(target, key) {
  const depsMap = bucket.get(target)
  if (!depsMap) return
  const effects = depsMap.get(key)
  const effectsToRun = new Set()
  effects && effects.forEach(effectFn => {
    if (effectFn !== activeEffect) {
      effectsToRun.add(effectFn)
    }
  })
  effectsToRun.forEach(effectFn => effectFn())
}

effect(
  () => {
    console.log(obj.foo)
  },
  // options
  {
    scheduler(fn) {
      // ...
    }
  }
)

function effect(fn, options = {}) {
  const effectFn = () => {
    cleanup(effectFn)
    activeEffect = effectFn
    effectStack.push(effectFn)
    fn()
    effectStack.pop()
    activeEffect = effectStack[effectStack.length - 1]
  }
  effectFn.options = options // 追加
  effectFn.deps = []
  effectFn()
}

function trigger(target, key) {
  const depsMap = bucket.get(target)
  if (!depsMap) return
  const effects = depsMap.get(key)
  const effectsToRun = new Set()
  effects && effects.forEach(effectFn => {
    if (effectFn !== activeEffect) {
      effectsToRun.add(effectFn)
    }
  })
  // 以下を更新
  effectsToRun.forEach(effectFn => {
    if (effectFn.options.scheduler) {
      effectFn.options.scheduler(effectFn)
    } else {
      effectFn()
    }
  })
}

function effect(fn, options = {}) {
  const effectFn = () => {
    cleanup(effectFn)
    activeEffect = effectFn
    effectStack.push(effectFn)
    const res = fn() // 追加
    effectStack.pop()
    activeEffect = effectStack[effectStack.length - 1]
    return res // 追加
  }
  effectFn.options = options
  effectFn.deps = []
  if (!options.lazy) { // 追加
    effectFn()
  }
  return effectFn // 追加
}

const effectFn = effect(
  () => obj.foo + obj.bar,
  { lazy: true }
)
const value = effectFn()

function computed(getter) {
  const effectFn = effect(getter, {
    lazy: true
  })
  const obj = {
    get value() {
      return effectFn()
    }
  }
  return obj
}

const data = { foo: 1, bar: 2 }
const obj = new Proxy(data, { /* ... */ })

const sumRes = computed(() => obj.foo + obj.bar)

console.log(sumRes.value) // 3

function computed(getter) {
  let value // 追加
  let dirty = true // 追加
  const effectFn = effect(getter, {
    lazy: true
  })
  const obj = {
    get value() {
      if (dirty) { // 追加
        value = effectFn()
        dirty = false
      }
      return value
    }
  }
  return obj
}

function computed(getter) {
  let value
  let dirty = true
  const effectFn = effect(getter, {
    lazy: true,
    scheduler() { // 追加
      dirty = true
    }
  })
  const obj = {
    get value() {
      if (dirty) {
        value = effectFn()
        dirty = false
      }
      return value
    }
  }
  return obj
}

const sumRes = computed(() => obj.foo + obj.bar)
console.log(sumRes.value) // 3
obj.foo++
console.log(sumRes.value) // 4

const sumRes = computed(() => obj.foo + obj.bar)
effect(() => {
  console.log(sumRes.value)
})
obj.foo++ // effect に与えた関数は再実行されない

function computed(getter) {
  let value
  let dirty = true
  const effectFn = effect(getter, {
    lazy: true,
    scheduler() {
      dirty = true
      trigger(obj, 'value') // 追加
    }
  })
  const obj = {
    get value() {
      if (dirty) {
        value = effectFn()
        dirty = false
      }
      track(obj, 'value') // 追加
      return value
    }
  }
  return obj
}

function watch(source, cb) {
  effect(
    // 読み取り操作を実行し、副作用を登録しておく
    () => source.foo,
    {
      scheduler() {
        cb()
      }
    }
  }
}

const data = { foo: 1 }
const obj = new Proxy(data, { /* ... */ })

watch(obj, () => {
  console.log('データが変化しました')
})

obj.foo++

function watch(source, cb) {
  effect(
    () => traverse(source), // 変更
    {
      scheduler() {
        cb()
      }
    }
  }
}

// 追加
function traverse(value, seen = new Set()) {
  if (typeof value !== 'object' || value === null || seen.has(value)) return
  seen.add(value)
  for (const k in value) {
    traverse(value[k], seen)
  }
  return value
}

function watch(source, cb) {
  // 追加
  let getter
  if (typeof source === 'function') {
    getter = source
  } else {
    getter = () => traverse(source)
  }

  effect(
    () => getter(), // 変更
    {
      scheduler() {
        cb()
      }
    }
  }
}

function watch(source, cb) {
  let getter
  if (typeof source === 'function') {
    getter = source
  } else {
    getter = () => traverse(source)
  }

  let oldValue, newValue // 追加
  const effectFn = effect(
    () => getter(),
    {
      lazy: true, // 追加
      scheduler() {
        // 変更
        newValue = effectFn()
        cb(newValue, oldValue)
        oldValue = newValue
      }
    }
  }
  oldValue = effectFn()
}

watch(
  () => obj.foo,
  (newValue, oldValue) => {
    console.log(newValue, oldValue) // 2, 1
  }
)
obj.foo++

function watch(source, cb) {
  let getter
  if (typeof source === 'function') {
    getter = source
  } else {
    getter = () => traverse(source)
  }

  let oldValue, newValue

  // 追加
  const job = () => {
    newValue = effectFn()
    cb(newValue, oldValue)
    oldValue = newValue
  }

  const effectFn = effect(
    () => getter(),
    {
      lazy: true,
      scheduler: job // 変更
    }
  }

  // 変更
  if (options.immediate) {
    job()
  } else {
    oldValue = effectFn()
  }
}

function watch(source, cb) {
  let getter
  if (typeof source === 'function') {
    getter = source
  } else {
    getter = () => traverse(source)
  }

  let oldValue, newValue

  const job = () => {
    newValue = effectFn()
    cb(newValue, oldValue)
    oldValue = newValue
  }

  const effectFn = effect(
    () => getter(),
    {
      lazy: true,
      scheduler: () => {
        // 変更
        if (options.flush === 'post') {
          const p = Promise.resolve()
          p.then(job)
        } else {
          job()
        }
    }
  }

  if (options.immediate) {
    job()
  } else {
    oldValue = effectFn()
  }
}

let finalData

watch(obj, async () => {
  const res = await fetch('/path/to/request')
  finalData = res
}

function watch(source, cb) {
  let getter
  if (typeof source === 'function') {
    getter = source
  } else {
    getter = () => traverse(source)
  }

  let oldValue, newValue

  // 追加
  let cleanup
  function onInvalidate(fn) {
    cleanup = fn
  }

  const job = () => {
    newValue = effectFn()
    if (cleanup) {  // 追加
      cleanup()
    }
    cb(newValue, oldValue)
    oldValue = newValue
  }

  const effectFn = effect(
    () => getter(),
    {
      lazy: true,
      scheduler: () => {
        if (options.flush === 'post') {
          const p = Promise.resolve()
          p.then(job)
        } else {
          job()
        }
    }
  }

  if (options.immediate) {
    job()
  } else {
    oldValue = effectFn()
  }
}

watch(obj, async (newValue, oldValue, onInvalidate) => {
  let expired = false
  onInvalidate(() => {
    expired = true
  })
  const res = await fetch('/path/to/request')
  if (!expired) {
    finalData = res
  }
})