Vue3是如何运行的

---

published: true
date: 2022-2-3
tags: ‘前端框架 Vue’

Vue3是如何运行的

这章作为Vue3原理的开头，将整体介绍JS框架的作用，以及Vue的总体运行流程，整体架构分为哪些等。

致谢Vue Mastery非常好的课程，可以转载，但请声明源链接：文章源链接justin3go.com(有些latex公式某些平台不能渲染可查看这个网站)

Dom操作介绍

let item = document.getElementsByTagName("h1")[0];
// 进行更新操作
item.textContent = "New Heading"

Virtual DOM

搜索和更新数千个DOM节点很明显会变慢，这就是Vue和其他类似框架的作用----Virtual DOM

Virual Node是一个JavaScript对象，Vue知道如何使用这些Virtual Node并挂载待DOM上，它会更新我们在浏览器上看到的内容，每个VNode对应一个DOM节点，Vue通过寻找更新VNode最小的更新数量，然后再将最优策略施加到实际DOM中，从而减少DOM操作，提高性能

还有一步<一个渲染函数>：

当组件改变时，Render函数将重新运行，它将创建另一个虚拟节点，然后发送旧的VNode和新的VNode到Vue中进行比较，并以最高效的方式在我们的网页上更新；

可以将Virtual DOM与actual DOM类比为蓝图与实际建筑的关系：

• 当我更改29楼的一些数据<家具的布局>
• 我可以拆除29楼的一切，重头开始；
• 我还可以创建新的蓝图对比旧的蓝图，并进行更新以尽可能减少工作量

Vue3三个核心模块

• Reactive Module
  • 跟踪、观察变化并作出相应的改变
• Compiler Module
  • 获取HTML模板并将它们编译成渲染函数
  • 浏览器可以只接收渲染函数
• Render Module
  • Render Phase
  • Mount Phase
  • Patch Phase

一个简单组件的执行

• 首先编译模块将HTML转换为一个渲染函数

• 

• 然后初始化响应式对象使用响应式模块：

• 

• 渲染模块中，我们进入渲染阶段，调用render函数，它引用了响应对象，我们现在观察这个响应对象的变化，render函数返回一个虚拟DOM节点

• 

• 挂载阶段调用mount函数，使用虚拟DOM节点创建web界面

• 

• 最后，如果我们的响应对象发生任何变化，渲染器再次调用render函数，创建一个新的虚拟DOM节点，新旧发送补丁函数中，按需更新我们的网页

• 

20129112301023.png" alt="image-20220129112301023" style="zoom:67%;" />