一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

theme: smartblue

虚拟组件如何描述组件？

vnode.type为对象的时候表示为组件，type储存了组件对象。

然后调用 mountCompoent 和 patchComponent 来完成挂载和更新

组件的自更新是怎么实现的？

获取组件的 data转换为响应数据 state，将组件返回的渲染函数 render() 放入副作用函数中，就与响应式数据建立了响应关系。

当 state 发生变化，重新渲染。

为了避免无用的渲染，需要在副作用函数中加入调度器 sheduler函数。其作用是，先用set创建一个的队列，将渲染副作用函数缓冲到微任务队列，就可以对渲染任务实现去重。

组件实例

其本质是一个对象，包含了组件运行时的状态,组件是否挂载 isMounted，组件自身的响应式数据states，组件渲染的内容subtree。如此一来，我们就可以判断什么时候更新，什么时候挂载。

组件的props是怎么实现被动更新的

父组件自更新所引起子组件更新叫做被动更新，

将解析出的props转换为浅响应式数据设置为组件实例 instance 上 props 属性

为了实现 this 对其 props 的获取，需要将 instance 进行代理，在尝试从自身上找不到属性后尝试在 props 上找，设置同理。

setup 函数

setup 函数会返回一个渲染函数或者一个对象，如果是对象的话则将其暴露到 renderContext 中。

emit 的实现原理

emit 的本质就是按规则在prop中 找对应事件名称的事件。

会将emit函数放入 setupContext 中暴露给用户拿到

插槽的实现

插槽会编译为插槽函数，在 renderContext 加入对 slot 的判断 当读取到 $slots时 返回实例上的 slots 对象。

组件的生命周期

通过 onMounted 注册的生命周期函数会被注册到 instance.mounted 中，然后在副作用函数执行的时候循环调用其中的函数

定义全局变量 currentInstance 来维护当前的组件实例

KeepAlive 组件的实现原理？

- `KeepAlive`是对内部组件设置“激活”或者“失活”状态，将组件放入到一个隐藏容器中，挂载的时候再拿出来。

- 组件的 `include` 和 `exclude` 是对内部组件的正则匹配实现的
- 缓存管理是使用LRU算法来保留最近使用的组件

Teleport 组件的实现原理

逻辑和渲染逻辑一样，判断新旧节点，增加或者更新到指定的位置。

Transition 的实现原理

在特定的渲染时机来执行用户传入的钩子函数