200 行从零实现 vue3

更新日期: 2019-11-12阅读: 2.2k标签: 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://www.fly63.com/article/detial/6400

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

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

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

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

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

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

对于大多数组件,Vue2和Vue3中的代码即使不完全相同,也是非常相似的。但是,Vue3支持片段,这意味着组件可以有多个根节点。这在呈现列表中组件以删除不必要的包装器div元素时特别有用。但是,在本例中,表单组件的两个版本都将只保留一个根节点

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!