十三张图浅谈Vue核心概念

浅谈 DOMVirtual DOMrender functions,然后是Vue的三个核心模块,最后通过一个简单的例子来了解Vue响应式原理。

DOM

简而言之:DOM是浏览器用于更改屏幕显示内容的API。

如果我们将HTML加载到浏览器中,浏览器会创建这些DOM结点以树结构显示我们的网页:

<html>
  <head>
    <title>My titletitle>
  head>

  <body>
    <h1>A headingh1>
  body>
html>

十三张图浅谈Vue核心概念_第1张图片

我们可以用JavaScript来操作这一系列映射成的DOM结点:

let item = document.getElementsByTagName("h1")[0];
item.textContent = "New Heading";

十三张图浅谈Vue核心概念_第2张图片

DOM树可以有成百上千个结点,像Vue这样的框架就是用来帮我们避免大量重复繁杂的JS调用。

但是查找和更新数千个DOM Nodes显然会让浏览器的渲染速度变慢,于是 Virtual DOM 出现了。

Virtual DOM & Render function

Virtual DOM 是一种用JavaScript对象来表示DOM的方式。

例如一个 div 就可以用一个JS对象来表示,而Vue可以获取这个 Virtual Node 并将其mount(挂载)到DOM上来更新我们在浏览器中看到的内容。

十三张图浅谈Vue核心概念_第3张图片

其实中间还有一个步骤,Vue会根据我们的HTML模板创建一个 render function 用来返回VNode:

十三张图浅谈Vue核心概念_第4张图片

当组件更新的时候,渲染函数会重新运行并创建一个新的虚拟节点,Vue将新的结点和旧的结点进行比较后在网页上更新,diff算法算是整个虚拟DOM中最关键的部分,但我不了解就不说了:

十三张图浅谈Vue核心概念_第5张图片

Vitrual DOMActual DOM 可以看成建筑蓝图到实际建筑的映射关系。

假如我想在建筑的某层楼里增加一些家具并改动一下布局,有两种办法:

  1. 拆除整层楼然后重建(too stupid)。
  2. 创建新的蓝图与旧图进行对比,然后以最小代价更新。

方式2就是 Virtual DOM 的工作方式,并且Vue3在更新方面变得更加高效。

3 core modules

  1. Reactivity Module

    允许我们创建可以观察变化的JS响应式对象,当这些对象的代码运行的时候,它们会被跟踪以便发生数据变化时改变运行状态。

  2. Compliler Module

    获取HTML模板将它们编译成render function

    十三张图浅谈Vue核心概念_第6张图片

  3. Renderer Module

    包含将组件渲染到网页上的三个不同阶段的代码,相信你看了上文后很好理解这三个阶段:

    十三张图浅谈Vue核心概念_第7张图片

一个例子

十三张图浅谈Vue核心概念_第8张图片

首先编译模块将HTML编译成 render function

十三张图浅谈Vue核心概念_第9张图片

初始化 reactive object

十三张图浅谈Vue核心概念_第10张图片

然后进入 renderer module 的第一个阶段,调用引用 reactive objectrender function,观察这个响应式对象的变化,渲染函数会返回一个VNode:

十三张图浅谈Vue核心概念_第11张图片

然后是挂载阶段 mount phase,使用VNode调用挂载函数来创建网页:

十三张图浅谈Vue核心概念_第12张图片

如果我们监视的对象发生任何变化,会再次调用渲染函数创建一个新的VNode,然后一起送到 patch function 根据需要更新网页:

十三张图浅谈Vue核心概念_第13张图片

总结

刚开始学习Vue总结的笔记类型的文章,有错漏可以评论告知。

参考视频:

  • Learn Vue.js with our Courses | Vue Mastery

  • Vue 3 Deep Dive with Evan You - YouTube

你可能感兴趣的