Old VTree
div.app
h1: 待办清单
ul.list
li: 学习 Vue
li: 写作业
li: 打游戏
Diff Result
修改: 1 个节点
新增: 1 个节点
div.app
h1: 待办清单
ul.list
li: 学习 Vue
li: {{ isModified ? '写代码' : '写作业' }}
li: 打游戏
li: 看电影
Real DOM
div.app
h1: 待办清单
- 学习 Vue
-
{{ isModified ? '写代码' : '写作业' }}
- 打游戏
-
看电影
{{ isModified ? '2' : '0' }}
需要更新的真实 DOM
{{ isModified ? '71%' : '—' }}
节省的 DOM 操作
核心思想：
虚拟 DOM 先在内存中对比新旧两棵树，找出最小差异，然后只更新必要的真实 DOM 节点——避免了大量无效操作。