生命周期

生命周期钩子 | Vue.js

DOM（Document Object Model） 是浏览器将 HTML 解析后生成的树形结构，JavaScript 可以通过它操作页面元素。
虚拟 DOM（Virtual DOM）是用 普通 JavaScript 对象 来描述 DOM 结构，存在于内存中，不是真实页面元素。

Vue 的工作流程

数据变化
  ↓
生成新的虚拟 DOM
  ↓
与旧虚拟 DOM 对比（Diff 算法）  ← 找出最小差异
  ↓
只更新真实 DOM 中变化的部分     ← 最小化操作

一个例子

列表从 3 项变成 4 项：

没有虚拟 DOM：重新渲染整个列表
有虚拟 DOM：  只插入新增的那 1 项

虚拟 DOM 是真实 DOM 的"草稿"，Vue 先在草稿上改，找出最小改动，再一次性同步到真实页面，从而提升性能。