/micro-vue-next

A tiny vuejs/core for learning vue.js design

Primary LanguageTypeScriptMIT LicenseMIT

micro-vue-next

🎯 完成 vuejs/core 的基本实现

🎯 学习如何设计一个充满魔法的前端框架

🎯 记录并输出一些内容

 

如何使用

# 打包
yarn build

# 测试
yarn test

 

项目相关的博客

Vue3 源码中的 Reactivity 学习和思考

Vue3 源码中的位运算

 

src/reactivity 响应式模块

🌟 API:reactive

🌟 API:ref

🌟 API:readonly

🌟 API:computed

🌟 track:依赖收集

🌟 trigger:依赖触发

🌟 API:isReactive

🌟 reactive 嵌套

🌟 API:toRaw

🌟 effect.scheduler 执行调度

🌟 effect.stop 停止触发依赖

🌟 API:isReadonly

🌟 API:isProxy

🌟 shallowReadonly 非嵌套只读

🌟 API:proxyRefs

 

src/runtime-core 渲染器和 runtime

🌟 支持组件类型

🌟 支持 element 类型

🌟 支持组件 props

🌟 支持 $el api

🌟 setup 可获取 props 和 context

🌟 emit 自定义事件

🌟 组件通过 proxy 实现 this 功能

🌟 可以在 render 函数中获取 setup 返回的对象

🌟 基础插槽支持

🌟 具名插槽支持

🌟 作用域插槽支持

🌟 nextTick 的实现

🌟 支持 getCurrentInstance API

🌟 支持 provide/inject

🌟 支持 Text 类型节点

 

src/runtime-dom DOM 平台渲染器

🌟 支持自定义渲染器

 

src/compiler-core 编译器

🌟 编译插值语法

🌟 编译 element 元素

🌟 编译 text 文本