学习 Vue

第 2 章 Vue 如何工作：基础知识

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

在上一章中，您学习了构建 Vue 应用程序的基本工具，还创建了第一个 Vue 应用程序，为下一步做好了准备：通过编写 Vue 代码来学习 Vue 如何工作。

本章将向您介绍虚拟文档对象模型（Virtual DOM）的概念以及使用 Vue Options API 编写 Vue 组件的基础知识。本章还将进一步探讨 Vue 指令和 Vue 反应机制。在本章结束时，您将了解 Vue 的工作原理，并能够编写和注册一个 Vue 组件，供您的应用程序使用。

引擎盖下的虚拟 DOM

Vue 并不直接使用文档对象模型（DOM）。相反，它通过实现虚拟 DOM 来优化应用程序在运行时的性能 。

为了牢固理解虚拟 DOM 的工作原理，我们先从 DOM 的概念开始。

DOM 以内存树状数据结构的形式（如图 2-1 所示）表示网页上的 HTML（或 XML）文档内容。它是连接网页和实际编程代码（如 JavaScript）的编程接口。HTML 文档中的标签（如<div> 或<section> ）被表示为编程节点和对象 。

图 2-1. DOM 树示例

浏览器解析 HTML 文档后，DOM 将立即可供交互使用。在布局发生变化时，浏览器会在后台不断绘制和重新绘制 DOM。我们将解析和绘制 DOM 的过程称为屏幕光栅化或像素到屏幕流水线。图 2-2演示了光栅化的工作原理 ：

图 2-2. 浏览器光栅化流程

版面更新问题

每次刷新都会对浏览器的性能造成很大影响。由于 DOM 可能由许多节点组成，因此查询和更新单个或多个节点的成本会非常高， 。

下面是 DOM 中li 元素列表的一个简单示例：

<ul class="list" id="todo-list">
  <li class="list-item">To do item 1</li>
  <li class="list-item">To do item 2</li>
  <!--so on…-->
</ul>

添加/删除li 元素或修改其内容需要使用document.getElementById （或document.getElementsByClassName ）查询该项目的 DOM。然后，您需要使用相应的 DOM API 执行所需的更新。

例如，如果您想在前面的示例中添加一个新项目，您需要执行以下步骤：

1. 通过id 属性的值查询包含的列表元素"todo-list"

2. 使用li 添加新元素document.createElement()

3. 使用setAttribute() 设置textContent 和相关属性，以符合其他元素的标准。

4. 使用appendChild() 将该元素作为子元素追加到步骤 1 中找到的列表元素中：

const list = document.getElementById('todo-list');

const newItem = document ...