详解vue的diff算法原理资源-CSDN文库

38 浏览量 2021-01-19 17:01:57 上传评论收藏 256KB PDF 举报

资源推荐

资源详情

资源评论

详解详解vue的的diff算法原理算法原理

我的目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，目的让看这篇文章的朋友一

定弄明白diff的边边角角。

先来了解几个点…

1. 当数据发生变化时，当数据发生变化时，vue是怎么更新节点的？是怎么更新节点的？

要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和

重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们。

我们先根据真实DOM生成一颗 virtual DOM ，当 virtual DOM 某个节点的数据改变后会生成一个新的 Vnode ，然后 Vnode 和 oldVnode 作

对比，发现有不一样的地方就直接修改在真实的DOM上，然后使 oldVnode 的值为 Vnode 。

diff的过程就是调用名为 patch 的函数，比较新旧节点，一边比较一边给真实的真实的DOM 打补丁。

2. virtual DOM和真实和真实DOM的区别？的区别？

virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构。比如dom是这样的：

<div>

<p>123</p>

</div>

对应的virtual DOM（伪代码）：

var Vnode = {

tag: 'div',

children: [

{ tag: 'p', text: '123' }

] };

（温馨提示： VNode 和 oldVNode 都是对象，一定要记住）

3. diff的比较方式？的比较方式？

在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。

<div>

<p>123</p>

</div>

<div>

<span>456</span>

</div>

上面的代码会分别比较同一层的两个div以及第二层的p和span，但是不会拿div和span作比较。在别处看到的一张很形象的图：

diff流程图流程图

当数据发生改变时，set方法会让调用 Dep.notify 通知所有订阅者Watcher，订阅者就会调用 patch 给真实的DOM打补丁，更新相应的

视图。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

内容反馈

weixin_38592405

粉丝: 6
资源: 868

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip