22_Vue3源码学习之真实DOM和虚拟DOM的渲染及Vue的核心模块

Vue3源码学习之真实DOM与虚拟DOM渲染及Vue的核心模块

真实的DOM渲染

我们传统的前端开发中，我们是编写自己的HTML，最终被渲染到浏览器上的，那么它是什么样的过程呢？

虚拟DOM的优势

目前框架都会引入虚拟DOM来对真实的DOM进行抽象，这样做有很多的好处：

首先是可以对真实的元素节点进行抽象，抽象成VNode（虚拟节点），这样方便后续对其进行各种操作：

• 因为对于直接操作DOM来说是有很多的限制的，比如diff、clone等等，但是使用JavaScript编程语言来操作这些，就变得非常的简单；

• 我们可以使用JavaScript来表达非常多的逻辑，而对于DOM本身来说是非常不方便的；

其次是方便实现跨平台，包括你可以将VNode节点渲染成任意你想要的节点

• 如渲染在canvas、WebGL、SSR、Native（iOS、Android）上；
• 并且Vue允许你开发属于自己的渲染器（renderer），在其他的平台上渲染；

虚拟DOM的渲染过程

三大核心系统

事实上Vue的源码包含三大核心：

• Compiler模块：编译模板系统；
• Runtime模块：也可以称之为Renderer模块，真正渲染的模块；
• Reactivity模块：响应式系统；

三大系统协同工作

三个系统之间如何协同工作呢：

以上内容学习自coderwhy老师的Vue3+Ts课程！！