mini-vue 手写

这一节的目标是，用户提供template，生成render函数，并且运行生成的函数，最后渲染出dom。 组件结构： 首先，compiler-core需要一个入口函数，它将依次调用parse->tran

transform transform的作用是遍历AST的每个结点，进行某些修改操作。 比如我们可以指定，每个text结点都增加"mini-vue"： 在实现上，为了保持transform的灵活性，使

现在，进入编译模块compiler-core，Vue3的编译分为以下三个阶段： parse：由template生成AST。 transform：修改AST的结点内容，使其满足我们的需求。 codege

组件更新 虽然已经实现了diff，但是更新还没做完。 根组件中的setup暴露了ref属性msg和count，把msg传给子组件，并且提供修改msg的方法changeChildProps和修改coun

关于Diff算法，大家可能早就知道Vue和React使用vnode，并且使用diff算法完成更新，最大限度减少浏览器对dom的操作，但是估计知道具体实现原理的人并不多，起码我以前一直是懵懂状态。

## createRenderer 自上一期完成provide/inject后，我们还实现了createRenderer。 - 目的：支持多平台渲染，之前只支持dom，但是还能支持canvas等

getCurrentInstance 这也是Vue3暴露给用户的一个api，它只能在setup中使用，返回当前组件的instance。我们分别在App和Foo组件的setup中调用。 如何在组件中拿到

经过上一期，我们大概知道了runtime-core模块是如何初始化vnode、instance，以及渲染到页面上的，实现了组件代理，并且使用位运算优化了判断类型的实现。这一次在搭好的大框架的基础上，实

从这节开始，reactivity暂告一段落，进入runtime-core部分。这部分负责的是组件渲染相关内容，即当我写好app.js文件后，如何挂载component使其显示在页面上，及其相关的问题。

这一次来搞定Ref，先思考几个问题： 为什么Ref要用.value。 在setup中使用ref需要.value，但是在template中不需要，是如何实现的。

这一次的内容比较轻松，首先是让我们上一节实现的isReactive、isReadonly实现嵌套的功能，然后实现shallowReadonly（不支持嵌套），最后是isProxy。

前情提要：上一期我们实现了基本的Effect和Reactive。这一次我们来实现Readonly，isReactive/isReadonly 以及优化Stop。

使用TDD（测试驱动开发）的方式手写Vue，一起学习Vue3源码。项目地址：https://github.com/DanmoSAMA/my-mini-vue