mini-vue3

createRenderer vue3有一个高阶api createRenderer，它可以自定义我们的渲染器 这章节模拟实现createRenderer，就目前代码，只支持dom类型渲染，进一步去修

前言 其实ShapeFlags的作用就是把前面的组件类型判断给整合起来，写成一个全局的enum，这样后期维护修改，可以便捷些 实现 新增ShapeFlags.ts 新增类型判断 vnode.ts 修改

基础版 实现 provide/inject 声明 实现父子组件的注入/取值 案例 实现 创建provide/inject apiInject.ts 拓展实例对象 component.ts create

思考 vue3中的getCurrentInstance api是 Composition API独有的语法糖，用来获取当前组件的实例 只有Composition Api有 每个组件都是独立的 根据以上

Fragment 回顾创建slot的时候的代码 问题：每次都是通过createdVNode去重新创建一个新的div节点，这样会导致一个问题。每个slot都会包一层div 很显然，这不优雅~ 可以通过F

实现一个普通的slots demo App.js Child.js index.html 在实例挂载$slots component.ts componentPublicInstanceProxyHa

思考 setup可选的第二个参数是context，里面有emit setup接收一个对象，里面有emit 子组件触发emit(xx)，父组件可以通过onXx接收回调 emit还可以传数据，emit(x

思考 vue render 中可以通过 onXXX去注册一些事件，例如 onClick(){}，去注册点击事件 实现

vue的render函数是可以通过this.xxx去获取options api和 composition api的数据的 基于hello word的例子，实现数据代理 实现setupState注册 思

why 我们需要把代码打包成库，供外部使用 rollup 一般是用来打包代码库 webpack 一般是用来打包应用 安装rollup及插件 配置rollup rollup.config.js pack

hello word index.html main.js App.js createApp createApp.ts render.ts vnode.ts render 处理component 处理

根据单侧实现功能 ref.spec.ts 实现 -----------

根据单侧实现功能 ref.spec.ts isRef unRef---------------------------

思考功能 ref的数据是双向绑定的 ref的数据通过.value取 根据功能写单侧 新建 ref.spec.ts 核心逻辑 实现ref.value 实现ref缓存 shared/index.ts re

isProxy 思考： vue3 isProxy的作用是用来判断对象是否为reactive和readonly对象 我们已经实现了 isReactive 和 isReadonly 了，其实就是拿这两个做

回顾之前的用例 effect.spec.ts 如果把 obj.prop = 3 改成 obj.prop++ obj.prop = 3 只触发了set操作，我们在前面已经用stop去清除对应的effec

单侧 核心逻辑 isReactive index.ts baseHandlers.ts isReadonly index.ts baseHandlers.ts

实现readonly。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

stop effect.spec.ts effect.ts 测试结果 onStop effect.spec.ts effect.ts

runner effect.spec.ts effect.ts scheduler effect.spec.ts effect.ts