小伟子酱

前言 provide和inject就是为了实现跨级通信，比如在组件库中，想跨级通信，那么就可以采用provide/inject 在vue3中，provide和inject只...

前言 Vue3新增组件，该组件可以将制定内容渲染到制定容器中。默认内容都是渲染到元素app内，我们可以将其渲染到任意节点（传送门） 示例 页面结果 实现 createVno...

前言 vuex缺点：ts兼容性不好、命名空间的缺陷、只能有一个store、mutation和action pinia 优点：ts兼容性好 、不需要命名空间，可以创建多个st...

前言 vite（法语意为"快速的"，发音/vit/），是下一代前端开发与构建工具 极速的服务启动，使用原生ESM文件，无需打包 轻量快速的热重载，无论应用大小如何，都始终极...

前言 设置方法中比获取要复杂一些，有很多种情况，下面我将一一详细讲解 createSetter 第一步 我们先去扩充一下工具方法，方便后面使用 我们要区分是新增的还是修改的...

前言 ref和reactive的区别 reactive内部采用的proxy，ref内部采用的是defineProperty ref也可以放对象，只是取值的时候需要多取一层，...

第一步 src源目录下创建computed.ts 导出computed函数，并对参数进行判断 如果是个函数，直接赋值给getter，否则分别取参数get和set赋值给get...

第一步 先封装一些dom的操作 元素操作： 文本操作： 第二步 在src下创建module文件夹，创建4个文件attr.ts、class.ts、event.ts、style...

第一步  用位运算来给虚拟节点加类型，我们先创建ShapeFlag.ts文件 第二步 创建vnode.ts文件写createVNode方法 创建一个对象来描述内容，上面的s...

上回说到在完成创建实例，给实例赋值后要创建一个effect，让render函数执行，这样render方法中拿到的数据就会收集这个effect，属性更新时，effect会重新...

当数据一变，就会触发对应的effect，然后重新调render重新渲染 第一步 首先我们需要处理一个事件里重复修改同一个值多次更新的问题，我们需要降低更新频率 我们在创建e...

如果被挂载过，也就是isMounted为true，触发effect的时候就会走组件更新的逻辑 diff算法就是比较两颗树的差异 第一步 我们先拿到老的的tree 然后把当前...

前言 我们上回说到，当老的是数组，新的也是数组就会进行diff算法 第一步 将老的儿子和新的儿子以及比较的是哪个元素 第二步 Vue3并没有采用双指针，都是默认从头开始比对...

前言 我们乱序比对的时候，会将节点全部的移动一遍，而我们希望尽可能少的移动，我们只需要找联系最长的，只需要动不连续的，这就是最长递增子序列 第一步 求最长递增子序列，vue...

effect effect方法是响应式的核心，叫做副作用函数。初始会默认执行时会进行取值操作，只要取值就会调用get方法，我们就可以将对应的effect函数存放起来，等会我...