Vue源码学习之虚拟Dom与Diff算法
本帖最后由 饭饭欧尼酱 于 2022-7-20 09:47 编辑# 什么是Diff算法？
**diff算法实现精细化对比，实现量小化精细更新**
举个栗子：
!(data/attachment/forum/202207/20/092900zimmt4tussktkokm.png)
# 什么是虚拟DOM？
首先我们要知道什么是真实DOM
举个栗子：
```html
<div>
<h1>我是一个标题</h1>
<ul>
<li>牛奶</li>
<li>咖啡</li>
<li>可乐</li>
</ul>
</div>
```
那有很多人疑问什么是虚拟DOM
再举个栗子：
```javascript
{
"sel": "div",
"data": {
"class": { "box": true}
},
"children": [
{
"sel": "h3",
"data": {},
"text": "我是一个标题"
},
{
"sel": "ul",
"data": {},
"children": [
{ "sel": "li", "data": {}, "text": "牛奶" },
{ "sel": "li", "data": {}, "text": "咖啡" },
{ "sel": "li", "data": {}, "text": "可乐" }
]
}
]
}
```
# DIff算法是如何更新在虚拟DOM上面呢？
```javascript
"sel": "div",
"data": {
"class": { "box": true}
},
"children": [
{
"sel": "h3",
"data": {},
"text": "我是一个标题"
},
{
"sel": "ul",
"data": {},
"children": [
{ "sel": "li", "data": {}, "text": "牛奶" },
{ "sel": "li", "data": {}, "text": "咖啡" },
{ "sel": "li", "data": {}, "text": "可乐" }
]
}
]
}
```
```javascript
"sel": "div",
"data": {
"class": { "box": true}
},
"children": [
{
"sel": "h3",
"data": {},
"text": "我是一个标题"
},
{
"sel": "span",
"data": {},
"text": "我是一个新的span"
}
{
"sel": "ul",
"data": {},
"children": [
{ "sel": "li", "data": {}, "text": "牛奶" },
{ "sel": "li", "data": {}, "text": "咖啡" },
{ "sel": "li", "data": {}, "text": "可乐" },
{ "sel": "li", "data": {}, "text": "雪碧" }
]
}
]
}
```
不知道大家通过以上代码有没有发现精细化更新呢？
简单来说就是新虚拟DOM和旧虚拟DOM进行diff(精细化比较)，算出应该如何最小量更新，最后反映到真正的DOM上 图片咋挂了 王一之 发表于 2022-7-20 10:48
图片咋挂了
没挂呀
我这里看着正常 > 李恒道 发表于 2022-7-20 11:10
> > 没挂呀
> > 我这里看着正常
woc?
!(data/attachment/forum/202207/20/141350n7zpxxox0xw8wq5b.png)
页:
[1]