吃透mini-vue

普通插槽 happy path 实现目标：把App.js中h("p", {}, "123")添加到foo组件内 代码实现 通过this获取到$slots 接下来只需要构建instance.slots即

props 需求 从setup中传入 在render中可以通过this来访问props的值 props第一层不可以被修改，内部深层次不做处理 场景 实现代码 在setupComponent初始化pro

shapeFlag用于描述当前虚拟节点vnode的类型，在目前的实现代码中有两处需要用到shapeFlag进行判断 renderer.ts的patch方法中判断vnode是Element``Compn

首先对之前的happy path进行一下改造 接下来我们要实现的就是，鼠标在div上摁下执行mousedown，放开执行click 还记得我们之前在renderer.ts中的mountElement方

实现目标：render函数中通过this获取setup返回的属性，获取$el setupState 获取 在之前实现Component初始化主流程的过程中，我们将setup的返回值赋值给了组件实例in

happy path 以上是一个简单的 happy path 最终要实现的目标是在浏览器渲染出上图内容 runtime-core 初始化 分析： createApp接收一个根组件，return一个对象

happy path 单元测试 以上是一个简单的 computed get 操作 代码实现 should compute lazily 单元测试 断言1 从断言1可以知道, computed 是懒执行

isRef 判断是不是 ref 单元测试 代码实现 这里返回值加上两个感叹号是为了如果参数不是一个 ref,那么 ref.__v_isRef 是 undefined。所以要变成boolean 值 un

reactive 通过 proxy 进行 get set 操作实现响应式。但是 reactive 只作用于对象。那么像 1，true，'1'这类的单值怎么实现响应式呢？ ref 想实现这些单值的响应式

reactive 嵌套 单元测试 想要实现嵌套 只需在 get 的时候 对类型为 object 的 res 再用 reactive 声明一下 代码实现 readonly 嵌套 单元测试 实现思路与 r

isReactive 单元测试 分析： 创建一个 reactive 其实就是返回代理对象 那么怎么知道代理对象是不是 reactive 通过 get 操作的 isReadonly 变量可以知道当前对象

在 vue3 中 readonly 的作用是只读，下面通过一个单测来呈现这个功能 单测 readonly 不能 set，意味着不会触发依赖，不会触发依赖意味着不需要做依赖收集 实现代码 代码重构 新建

stop 单测 从上述单元测试可知，stop 的作用是当 reactive 对象在执行 set 时候 阻止触发依赖，那么如何阻止呢？ 先来看下之前实现的触发依赖代码 回顾之前trigger的代码可以知

直接上vue3的schedule单测 由上面的单测可知 初始化不执行 scheduler 只有在 reactive 对象触发 set 操作的时候才执行 scheduler 当 effect 存在 sc

通过一个单元测试来了解什么是runner 分析上述代码可知： 调用 effect 之后，返回一个 function , 这个 function 可以称之为 runner 调用 runner 会执行 e

vue3的响应式数据核心是reactive，reactive的核心是effect 下面来实现上图的流程 实现reactive 这样就很简单的实现了一个有get、set操作的reactive函数 通过以