手把手带你实现mini-vue

vue3中对于数据和视图的更新是异步的，如果我们在处理数据的时候，希望获取到视图更新后的组件实例的话，是没法在当前的同步代码中获取到的，因为此时视图还没有更新，这就要用到今天要讲的nextTick

前面我们实现了元素的更新，也是整个runtime-core模块中最困难的部分，这节也是实现更新逻辑，但是不再是元素的更新了，而是组件的更新，组件的更新就相对而言简单很多

本节是双端diff算法的最后一节，会讲解中间元素的移动和新增逻辑，主要是讲解移动的逻辑，在移动的逻辑完成的前提下，新增的逻辑很容易就能实现

上一章我们实现了双端对比的逻辑，完成了左端和右端的对比，经过双端对比的筛选后，我们就得到了新旧children中间的差异部分，接下来就是算法的核心，如何处理这些差异部分？这就是本节要讲解的内容

处理更新vnode.children时的array变成array的情况，需要对比哪些children需要更新，这就要用到双端diff算法，本节会讲解双端diff算法的几种一般情况

今天我们会来实现更新元素的逻辑，也就是对于一个vnode，它的chilren发生变化的时候，应当如何处理，才能使得数据children的变化导致视图也更新，这就要用到我们前面实现的reactivity

目前我们已有的渲染器只支持渲染DOM环境，如果我们希望渲染在别的地方，并且依然能够享受到我们的mini-vue的特性的话，就需要将原有的具体DOM环境的实现抽象成通用的渲染逻辑，将具体实现抽象成接口

本节我们会来实现provide/inject，有了它我们就可以实现组件跨级传递数据，在父组件的setup中通过provide提供数据，无论多深层级的子组件都可以通过inject的方式获取到数据

本篇文章是给之后实现provide/inject功能做铺垫的，我们会实现vue3中的一个API -- getCurrentInstance，它能够允许我们在setup中获取到当前组件实例对象

Text类型的vnode会被直接渲染成文本，不会有任何标签包裹，像之前如果我们需要渲染文本的话，是需要一个父标签包裹的，比如p标签、span标签等，而Text类型的vnode就能够打破这个限制

本篇文章会为之前实现的vnode进行扩展，扩展一个新的类型的vnode -- Fragment，其对应于原生DOM中的Fragment结点

本篇会讲插槽的最后一个实现 -- 作用域插槽，有了它我们就可以使用子组件在插槽中暴露给父组件使用的属性了

上一篇文章中讲了默认插槽的实现原理，这一篇会讲一下具名插槽的实现方式，也就是能够在父组件中指定插槽要渲染在子组件中的位置

本篇文章会带你实现组件的slots插槽功能，包括默认插槽、具名插槽和作用域插槽 为了防止篇幅过长，我会将组件插槽的实现分成三篇文章去讲解，本篇是第一篇，带你实现组件的默认插槽

本篇文章会带你实现组件的emit功能，能够在子组件中发出自定义事件，并在父组件中由相应的onXxx的props接收并处理，还支持给自定义事件传递参数，并且支持短横线分隔的自定义事件名

本篇文章会带你实现一下组件的props功能，主要包括能够在setup函数中接收props参数、在render函数中可以访问props中的属性和方法、props无法修改，只能读取

本节我们会来实现一下事件注册的功能，也就是平时我们在vue的template中会用到的v-on编译成渲染函数后的结果

本篇文章会对之前的代码进行重构，主要是重构区分组件类型的逻辑 由于组件类型的判断将会经常用到，那么实现一个有效且高性能的方式去区分组件类型很有必要，这就是本节要讲的ShapeFlags的作用

本节会介绍如何在render函数中访问setupState以及this.$el setupState指的就是setup函数返回的对象 而this.$el则可以获取到组件挂载到的目标DOM元素对象

从今天开始我们进入到mini-vue的另一个模块 -- runtime-core，这是vue的核心模块，组件相关的逻辑都是在这个模块中处理的，以及vue的渲染器等功能也是在这里实现的