Vue

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情 v-enter-from：输入的开始状态。在插入元素之前添加，在插入元素后删除一帧。 v-enter-a

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情 ​ keepAlive是Vue的内置组件，作用是将组件缓存在内存当中，防止重复渲染DOM，属于空间换时间

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。 Vue3开发一个 v-loading 自定义指令 在 vue2 时期使用过 element-ui 组件库的

shallowReadonly 这个函数其实就是 shallow 和 readonly 两个的结合体 这种形式一般用于做程序中的优化，防止把全部的对象都转换成响应式对象了。 shallow：表层 最外

reactive和readonly对象中嵌套有其他对象。 先来写一下测试文件 reactive、readonly 对象内部的对象，也需要是 reactive、readonly 的 功能实现

优化stop的另外一种边缘case。 我们先来看看之前写的 stop 单元测试 这里我们之前实现的是，给 obj.prop 赋值 3，effect的fn也不会触发，dummy 依旧是 2 现在我们尝试

isReactive 我们首先补一下测试 我们通过之前的 createGetter 方法，这里的 get 操作中包含了 isReadonly 参数，通过这个参数就可以知道当前触发的 get 操作是什么

先写readonly的单测 实现readonly readonly 其实就是 reactive 只读方法的实现： 这样的话，readonly 就实现了。 重构代码逻辑 先看下我们的 reactive.

这一节我们来实现 effect 的 stop 和 onStop 功能 stop 首先，我们来看一下单元测试的代码： stop 功能点： effect 中导出一个 stop 方法 stop 方法的参数是

完善 effect 的功能 一、runner 调用effect（fn）之后，其实是会返回一个 function（runner） 的 当调用 function 时会再次调用用户传给 effect 的 f

effect，reactive（依赖收集 触发依赖） 现在，我们开始写第一个测试。可以把之前初始化项目使用的测试文件给删掉 src\reactivity\tests\index.spec.ts。 新建

基于Vue3的mini版本 1、初始化项目 2、配置jest 修改 tsconfig.json 文件，打开 "types"，加上 "jest" 当前目录结构如下： 添加文件 src\reactivit