57 lines
543 B
JavaScript
57 lines
543 B
JavaScript
|
|
|||
|
|
|
|||
|
|
## 前言
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
vdom 是 vue 和 React 的**核心**，先讲哪个都绕不开它。
|
|||
|
|
|
|||
|
|
vdom 比较独立，使用也比较简单。
|
|||
|
|
|
|||
|
|
如果面试问到 vue 和 React 和实现，免不了问 vdom：
|
|||
|
|
|
|||
|
|
- vdom 是什么？为何会存在 vdom？
|
|||
|
|
|
|||
|
|
- vdom 的如何应用，核心 API 是什么
|
|||
|
|
|
|||
|
|
- 介绍一下 diff 算法
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 什么是 vdom
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 什么是 vdom
|
|||
|
|
|
|||
|
|
DOM操作是昂贵的。
|
|||
|
|
|
|||
|
|
步骤一：用JS对象模拟DOM树
|
|||
|
|
|
|||
|
|
步骤二：比较两棵虚拟DOM树的差异
|
|||
|
|
|
|||
|
|
步骤三：把差异应用到真正的DOM树上
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|