5C24

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

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

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

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

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

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

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

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

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

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

isReactive 单元测试 分析： 创建一个 reactive 其实就是返回代理对象 那么怎么知道代理对象是不是 reactive 通过 get 操作的 isReado...

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

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

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

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