200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码，再用半天时间写了个 mini 版……

我觉得我也是没谁了，vue3 的源码未来一定会烂大街的，我们越早的去复现它，就……emm可以越早的装逼hhh

源码

关于源码解读，我就不写文章了，未来肯定会很多，但是为了方便理解，我们可以事先写一下伪代码

get => track（依赖收集）=> set => trigger（批量执行 effect）=> diff + patch

结合上面这一行，我们可以很轻松的实现一个mini vue3

实现

首先实现 mount

export function mount (instance,el) {
    let mounted = false
    instance.render = instance.setup()

    instance.update = effect(function componentEffects () {
      if (!mounted) {
        el.appendChild(createElement(instance.render()))
        mounted = true
      } else {
        const oldVnode = instance.subTree || null
        const newVnode = (instance.subTree = instance.render())
        // 忽略 diff patch
        el.innerhtml = ''
        el.appendChild(createElement(newVnode))
      }
    })
    instance.update()
}

mount 方法传入一个对象，对象里有一个 setup 函数，它这么用：

const App = {
  setup () {
    let state = reactive({ count: 0 })
    const add = () => state.count++
    return () => <button onClick={add}>{state.count}</button>
  }
}
createApp().mount(App) //忽视 createApp

我们看到一个神奇的秘密，就是 setup 不是直接返回 jsx，它返回的是一个函数，这很重要，这里是个闭包，相当于缓存了 this

我们补全一些 dom 的方法：

export function updateProperty (dom, name, oldValue, newValue) {
  if (name === 'key') {
  } else if (name[0] === 'o' && name[1] === 'n') {
    name = name.slice(2).toLowerCase()
    if (oldValue) dom.removeEventListener(name, oldValue)
    dom.addEventListener(name, newValue)
  }
}

export function createElement (vnode) {
  let dom = vnode.tag === TEXT ? document.createTextNode(vnode.type) : document.createElement(vnode.type)
  if (vnode.children) {
    for (let i = 0; i < vnode.children.length; i++) {
      dom.appendChild(createElement(vnode.children[i]))
    }
  }
  for (var name in vnode.props) {
    updateProperty(dom, name, null, vnode.props[name])
  }
  return dom
}

这样我们就可以点击按钮了，点击按钮，会触发 set，进而触发 trigger 函数

export function trigger (target, key) {
  let deps = targetMap.get(target)
  const effects = new Set()

  deps.get(key).forEach(e => effects.add(e))

  effects.forEach(e => e())
}

这个方法很简单，就是批零执行 effect，还记得 effect 是啥吗？是我们一开始缓存的 update 函数

但是这里的 effects 是从 targetMap 中拿到的，这玩意从哪里来？

答案就是依赖收集，也就是 track 函数

export function track (target, key) {
  const effect = activeEffectStack[activeEffectStack.length - 1]
  if (effect) {
    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()))
    }
    if (!dep.has(effect)) {
      dep.add(effect)
    }
  }
}

track 做的事情也很简单，就是初始化各种的 Map ，Set等，顺便将 effect 添加进去，targetMap 的结构长这样：

用代码描述，差不多是这样的：

WeakMap
  target Map
           key Set
                 effect1, effect2,...

最后补全 reactivity 的内容，这部分就是纯 proxy 了，不难：

const toProxy = new WeakMap()
const toRaw = new WeakMap()
export const targetMap = new WeakMap()
const isObj = obj => typeof obj === 'object'

export function reactive (target) {
  if (!isObj(target)) return target

  let proxy = toProxy.get(target)
  if (proxy) return proxy

  if (toRaw.has(target)) return target

  const handlers = {
    get (target, key, receiver) {
      let res = Reflect.get(target, key, receiver)
      if (isObj(target[key])) {
        return reactive(res)
      }
      track(target, key)
      return res
    },
    set (target, key, value, receiver) {
      let res = Reflect.set(target, key, value, receiver)
      if (key in target) {
        trigger(target, key)
      }
      return res
    },
    deleteProperty () {
      return Reflect.defineProperty(target, key)
    }
  }

  let observed = new Proxy(target, handlers)

  toProxy.set(target, observed)
  toRaw.set(observed, target)

  if (!targetMap.has(target)) {
    targetMap.set(target, new Map())
  }

  return observed
}

以上，我们成功复现了 vue3 核心，包括了响应式，依赖收集，触发更新等

讲道理，仅仅是原理的话，真的很容易实现，里面没啥复杂的地方，其实这类框架中，最复杂的还是 diff 算法，但是今天我们的目标是搞清楚 vue3 的基本套路

总结

我开了个新坑，叫 voe，会结合 vue 的给出对等的复现，github 在这里：https://github.com/132yse/voe

但是我不准备完全复现 vue3，我认为 vue3 在业务层面已经登峰造极了，没理由替代它

voe 未来会寻找新的突破，比如双线程，web worker 等

复现 vue 只是顺手的事~

原文：https://zhuanlan.zhihu.com/p/91266204

链接: https://fly63.com/article/detial/6400

200 行从零实现 vue3

vue3.x 新特性 - CompositionAPI

Vue3数据响应系统

快速进阶Vue3.0

Vue 3 对 Web 应用性能的改进

Vue3 中令人兴奋的新功能

从 Proxy 到 Vue 源码，深入理解 Vue 3.0 响应系统

Vue 的数据响应式（Vue2 及 Vue3）

在Vue2与Vue3中构建相同的组件

Vue3中的Vue Router初探

vue3对比vue2使用，代码解释最直观