f18855666661的博客

KeepAlive 组件的作用是：缓存子组件的实例以及上次渲染的真实 DOM，当 KeepAlive 的子组件是之前已经缓存的子组件时，会将缓存的真实 DOM 和组件实例拿出来进行复原，这可以防止子组件从 0 开始实例化和渲染。...

异步组件的实现主要借助了组件的 setup 选项，当 setup 函数的返回值是一个函数时，这个返回的函数就会作为异步组件的 render 函数。

组件是对页面中内容的一种模块化封装，这篇博客讲解 Vue 中组件化的实现方式。

这篇文章讲解 Vue 中常说的 diff 算法，既会讲解 Vue3 的版本，也会讲解 Vue2 的版本。

这篇文章主要是从一个整体的视角介绍一下渲染器的工作流程，让大家有了整体的感知。我们可以发现，渲染器的代码量是非常多的，Vue 中的许多功能也是依托于渲染器实现的，所以不可能在一片博客中对渲染器进行全面的解读。接下来，当讲解到具体的功能时，如果这个功能的实现依托于渲染器，我会着重对渲染器中对应的代码进行细致解读。...

这篇文章详细讲讲 Vue3 中的响应式 API，如下图所示：

ref API 的官方文档点击这里，官网中需要注意的点是：如果参数是一个对象的话，ref 的内部会使用 reactive 对参数进行一层转化封装，若要避免这种深层次的转换，请使用shallowRef()来替代 ref。

ok，Vue2 中的 watch 和 computed 的实现思路就是这样了，是不是发现和 Vue3 中的实现思路也差不多。接下来，说说 Vue3 中 ref 函数是如何实现的。

ok，Vue3 的 computed 和 watch 讲完了，下一篇博客，讲讲 Vue2 中的 computed 和 watch。

上一篇博客讲解了 Vue3 响应式系统的核心思想，但真正的响应式系统不可能这么简单，真实的业务场景中，会有很多更加复杂的场景，这一篇博客，我们来增强上一篇中实现的响应式系统。

依赖就是封装了 effect 函数的实例，这个实例能够被收集存储，并向外提供了能够重新执行 effect 函数的方法。}run(){this.fn()}}// _effect 就是依赖}// 副作用函数console.log("哈哈")})Vue3 和 Vue2 的响应式系统核心思想并没有变，只不过 Vue3 的源码更加的简练、解耦和易于理解，对 Vue2 响应式感兴趣的朋友可以看我的这篇博客。...

Vue3 的项目截图如下所示：compiler-core // 与平台无关的编译器核心compiler-dom // 针对浏览器的编译模块compiler-sfc // 用于解析 xxx.vue 单文件compiler-ssr // 针对服务器渲染的编译模块reactivity // 响应式系统runtime-core // 与平台无关的运行时核心runtime-dom // 针对浏览器的运行时，例如包含了很多 DOM 操作以及属性事件操作等等。...