首页
首页
沸点
课程
直播
活动
竞赛
商城
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
mini-vue3
林某人_
创建于2021-06-20
订阅专栏
基于 vue3 源码实现一个 TDD mini版vue
等 3 人订阅
共42篇文章
创建于2021-06-20
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
林某人_
1年前
Vue.js
41 - 实现template模板编译
例子 查看例子 实现思路 需要把写好 codegen 暴露到全局,在 runtime 阶段使用 runtime 暴露对应函数, 让 codegen 引用这个函数,这也是 Vue 官网推荐的做法,这样做
43
点赞
评论
林某人_
1年前
Vue.js
40 - codegen 实现三种类型联合
测试用例 最终生成 实现 目前问题 上节实现的 element类型转换,只是简单的判断如果是 element 类型就push对应的 helper 和 tag,并没有考虑标签内包裹的内容,即转换成 as
54
点赞
评论
林某人_
1年前
Vue.js
39- codegen 生成 element
实现例子 element 类型 的 codegen 跟官网的不一样,官网的是优化版的,我们这只实现核心功能。 测试样例 实现 新增 transformElement plugin transformE
98
点赞
评论
林某人_
1年前
Vue.js
38- codegen 生成 插值
Vue官方例子 依旧是根据Vue编译器生成code string来实现 用例 实现 抽取公用常量 如果有去玩编译器不难发现,每个类型对应的一些函数引用不是一样的,为了提高代码健壮性,我们可以把对应类型
54
点赞
评论
林某人_
1年前
Vue.js
37- codegen 生成 text
模拟Vue,将一个 template 生成为 render 用例 采用快照的形式来看自己生成的 code string 实现
86
点赞
评论
林某人_
1年前
Vue.js
36-实现transform
前言 transform 是 compiler 中很重要的一个环境,当我们修改content或者dom时,都会触发 transform 用例 实现 用例上需要把 hi 替换成 hi mini-vue,
46
点赞
评论
林某人_
1年前
Vue.js
35-编译模块-联合类型实现
例子 实现3种类型结合的情况 实现 目前问题 就目前的代码,是无法实现联合类型的判断,因为我们代码只运行了一次。 例子 <div><p>hi,</p>{{message}}</div>,会直接判断为e
84
点赞
评论
林某人_
1年前
Vue.js
34-编译模块概述-text类型
测试用例 实现 新增TEXT类型 ast.ts 判断TEXT类型 parse.ts 解析text 这里封装了parseTextData,可以同步优化一下 parseInterpolation
35
点赞
评论
林某人_
1年前
Vue.js
33-编译模块概述-element类型
测试用例 实现 新增ELEMENT类型 ast.ts 新增ELEMENT类型判断 parse.ts 这里我们就简单完成了element类型判断 实现ELEMENT判断 处理闭合标签 前面实现了标签识别
41
点赞
评论
林某人_
1年前
前端
32-编译模块概述-插值类型
测试用例 实现 伪实现 先返回一个固定的内容,通过测试用例 解析插值是在 parseInterpolation 里完成的,前面我们写了伪代码,现在来完善这部分代码。 抽离 AST Node 类型 新建
44
点赞
评论
林某人_
1年前
前端
31-编译模块概述
写Vue的时候,相对于render,最方便的还是<template>; 但Vue内部最终会通过compiler把<template>转换成render,我们接下来要做的事,就是去实现这一转换过程。 编
30
点赞
评论
林某人_
1年前
Vue.js
30-实现nextTick & 实现视图异步更新
先来个例子 假如我们有个按钮,里面循环了100次,更改了count的值,会发生什么? 会触发100次的effect。。如果页面复杂了,浏览器就得被玩坏了! Vue3的视图更新,其实是异步的!不会多次触
43
点赞
评论
林某人_
1年前
Vue.js
29-更新component组件
例子 查看例子 实现 新增$props 例子中用了this.$props.xx,但是目前我们没有this.$props,我们把新增一个$props对象 componentPublicInstanceP
48
点赞
评论
林某人_
1年前
Vue.js
28-更新element-children-4
例子 参考ArrayToArray.js中的 5.2、5.2.2例子 思考 其实我们已经做了首部、尾部对比,并且做了中间对比替换了,但是目前的代码存在性能上的问题 中间乱序部分会全部进行重排 乱序重排
41
点赞
评论
林某人_
1年前
前端
28-更新element-children-3
例子 参考ArrayToArray.js中的 5.1、5.1.1例子 实现 主要3个部分 提取新数据的key,旧数据遍历时,用来提取对应key的数据 遍历旧数据,找到与旧数据key对应的新数据,赋值给
55
点赞
评论
林某人_
1年前
JavaScript
27-更新element-children-2
对比情况 array -> array 新旧左侧对比,取出差异数据下标 新旧右侧对比,锁定右侧差异位置 新旧数据对比,新增少删 例子 参考 上一篇 中的 ArrayToArray.js 前导思考 Vu
56
点赞
评论
林某人_
1年前
Vue.js
26-更新element-children-1
更新对比 children更新主要考虑一下3种情况,其中array->array是最复杂的,这章节先做其他两种情况 text -> array array -> array array -> text
81
点赞
评论
林某人_
1年前
Vue.js
25-更新element-更新props
来个案例 实现 更新props 更新props时候主要考虑2种情况 更新 删除 render.ts runtime-dom/index.ts
97
点赞
评论
林某人_
1年前
Vue.js
15-实现初始化props
思考 Vue的 setup函数可以接收 props,并且能通过this.xx获取props的数据 setup可以接收props render可以通过this.xx获取props的数据 props是只读
53
点赞
评论
林某人_
1年前
Vue.js
24-更新element-初始化
思考 如何触发侦听收集? 如何判断是初始化或者是更新? 基于这两点,逐步实现element更新流程 先来个例子 记得把相关函数暴露出来 依赖收集 在写ref、reative的时候,已经用effect做
54
点赞
评论
下一页