首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
mini-vue3
林某人_
创建于2021-06-20
订阅专栏
基于 vue3 源码实现一个 TDD mini版vue
等 3 人订阅
共42篇文章
创建于2021-06-20
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
23-实现customRenderer
createRenderer vue3有一个高阶api createRenderer,它可以自定义我们的渲染器 这章节模拟实现createRenderer,就目前代码,只支持dom类型渲染,进一步去修
22-新增ShapeFlags
前言 其实ShapeFlags的作用就是把前面的组件类型判断给整合起来,写成一个全局的enum,这样后期维护修改,可以便捷些 实现 新增ShapeFlags.ts 新增类型判断 vnode.ts 修改
21-实现provide/inject
基础版 实现 provide/inject 声明 实现父子组件的注入/取值 案例 实现 创建provide/inject apiInject.ts 拓展实例对象 component.ts create
20-实现getCurrentInstance
思考 vue3中的getCurrentInstance api是 Composition API独有的语法糖,用来获取当前组件的实例 只有Composition Api有 每个组件都是独立的 根据以上
19-实现 Fragment 节点和 Text 节点
Fragment 回顾创建slot的时候的代码 问题:每次都是通过createdVNode去重新创建一个新的div节点,这样会导致一个问题。每个slot都会包一层div 很显然,这不优雅~ 可以通过F
18-实现slots
实现一个普通的slots demo App.js Child.js index.html 在实例挂载$slots component.ts componentPublicInstanceProxyHa
17-实现组件emit
思考 setup可选的第二个参数是context,里面有emit setup接收一个对象,里面有emit 子组件触发emit(xx),父组件可以通过onXx接收回调 emit还可以传数据,emit(x
16-实现注册事件
思考 vue render 中可以通过 onXXX去注册一些事件,例如 onClick(){},去注册点击事件 实现
14-实现组件代理
vue的render函数是可以通过this.xxx去获取options api和 composition api的数据的 基于hello word的例子,实现数据代理 实现setupState注册 思
13-配置rollup
why 我们需要把代码打包成库,供外部使用 rollup 一般是用来打包代码库 webpack 一般是用来打包应用 安装rollup及插件 配置rollup rollup.config.js pack
12-初始化主流程
hello word index.html main.js App.js createApp createApp.ts render.ts vnode.ts render 处理component 处理
11-实现 proxyRefs
根据单侧实现功能 ref.spec.ts 实现 -----------
10-实现 isRef & unRef
根据单侧实现功能 ref.spec.ts isRef unRef---------------------------
9-实现 ref
思考功能 ref的数据是双向绑定的 ref的数据通过.value取 根据功能写单侧 新建 ref.spec.ts 核心逻辑 实现ref.value 实现ref缓存 shared/index.ts re
8-实现 isProxy & shallowReadonly & shallowReactive
isProxy 思考: vue3 isProxy的作用是用来判断对象是否为reactive和readonly对象 我们已经实现了 isReactive 和 isReadonly 了,其实就是拿这两个做
7-优化 shop 功能
回顾之前的用例 effect.spec.ts 如果把 obj.prop = 3 改成 obj.prop++ obj.prop = 3 只触发了set操作,我们在前面已经用stop去清除对应的effec
6-实现 isReactive & isReadonly
单侧 核心逻辑 isReactive index.ts baseHandlers.ts isReadonly index.ts baseHandlers.ts
5-实现 readonly
实现readonly。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
4-实现effect的stop && onStop
stop effect.spec.ts effect.ts 测试结果 onStop effect.spec.ts effect.ts
3-实现effect的runner && scheduler
runner effect.spec.ts effect.ts scheduler effect.spec.ts effect.ts
下一页