mini-vue3

例子 查看例子 实现思路 需要把写好 codegen 暴露到全局，在 runtime 阶段使用 runtime 暴露对应函数， 让 codegen 引用这个函数，这也是 Vue 官网推荐的做法，这样做

测试用例 最终生成 实现 目前问题 上节实现的 element类型转换，只是简单的判断如果是 element 类型就push对应的 helper 和 tag，并没有考虑标签内包裹的内容，即转换成 as

实现例子 element 类型 的 codegen 跟官网的不一样，官网的是优化版的，我们这只实现核心功能。 测试样例 实现 新增 transformElement plugin transformE

Vue官方例子 依旧是根据Vue编译器生成code string来实现 用例 实现 抽取公用常量 如果有去玩编译器不难发现，每个类型对应的一些函数引用不是一样的，为了提高代码健壮性，我们可以把对应类型

模拟Vue，将一个 template 生成为 render 用例 采用快照的形式来看自己生成的 code string 实现

前言 transform 是 compiler 中很重要的一个环境，当我们修改content或者dom时，都会触发 transform 用例 实现 用例上需要把 hi 替换成 hi mini-vue，

例子 实现3种类型结合的情况 实现 目前问题 就目前的代码，是无法实现联合类型的判断，因为我们代码只运行了一次。 例子 <div><p>hi,</p>{{message}}</div>，会直接判断为e

测试用例 实现 新增TEXT类型 ast.ts 判断TEXT类型 parse.ts 解析text 这里封装了parseTextData，可以同步优化一下 parseInterpolation

测试用例 实现 新增ELEMENT类型 ast.ts 新增ELEMENT类型判断 parse.ts 这里我们就简单完成了element类型判断 实现ELEMENT判断 处理闭合标签 前面实现了标签识别

测试用例 实现 伪实现 先返回一个固定的内容，通过测试用例 解析插值是在 parseInterpolation 里完成的，前面我们写了伪代码，现在来完善这部分代码。 抽离 AST Node 类型 新建

写Vue的时候，相对于render，最方便的还是<template>； 但Vue内部最终会通过compiler把<template>转换成render，我们接下来要做的事，就是去实现这一转换过程。 编

先来个例子 假如我们有个按钮，里面循环了100次，更改了count的值，会发生什么？ 会触发100次的effect。。如果页面复杂了，浏览器就得被玩坏了！ Vue3的视图更新，其实是异步的！不会多次触

例子 查看例子 实现 新增$props 例子中用了this.$props.xx，但是目前我们没有this.$props，我们把新增一个$props对象 componentPublicInstanceP

例子 参考ArrayToArray.js中的 5.2、5.2.2例子 思考 其实我们已经做了首部、尾部对比，并且做了中间对比替换了，但是目前的代码存在性能上的问题 中间乱序部分会全部进行重排 乱序重排

例子 参考ArrayToArray.js中的 5.1、5.1.1例子 实现 主要3个部分 提取新数据的key，旧数据遍历时，用来提取对应key的数据 遍历旧数据，找到与旧数据key对应的新数据，赋值给

对比情况 array -> array 新旧左侧对比，取出差异数据下标 新旧右侧对比，锁定右侧差异位置 新旧数据对比，新增少删 例子 参考 上一篇 中的 ArrayToArray.js 前导思考 Vu

更新对比 children更新主要考虑一下3种情况，其中array->array是最复杂的，这章节先做其他两种情况 text -> array array -> array array -> text

来个案例 实现 更新props 更新props时候主要考虑2种情况 更新 删除 render.ts runtime-dom/index.ts

思考 Vue的 setup函数可以接收 props，并且能通过this.xx获取props的数据 setup可以接收props render可以通过this.xx获取props的数据 props是只读

思考 如何触发侦听收集？ 如何判断是初始化或者是更新？ 基于这两点，逐步实现element更新流程 先来个例子 记得把相关函数暴露出来 依赖收集 在写ref、reative的时候，已经用effect做