vue的diff 算法

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

要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢？diff算法能够帮助我们。

我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。

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

有点类似这样：

<div><p>123</p>
</div><script>
var Vnode = {tag: 'div',children: [{ tag: 'p', text: '123' }]
};
</script>// 在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。

vue的diff 算法相关推荐

[vue] 你了解vue的diff算法吗？
[vue] 你了解vue的diff算法吗? 我的理解:计算出虚拟 DOM 中真正变化的部分,并且只针对该部分进行 DOM 更新,而非重新渲染整个页面个人简介我是歌谣,欢迎和大家一起交流前后端知识. ...
Vue中diff算法的理解
Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结 ...
2.vue的diff算法(2020.12.07)
在之前的生命周期中有提到过虚拟dom的相关概念,这里来简单介绍一个vue的diff算法的原理 1.virtual dom 无论是vue还是react,在更新渲染的过程中,都是先根据真实dom生成一个虚 ...
vue的diff算法原理
1. 为什么要用Diff算法由于在浏览器中操作DOM是很昂贵的,频繁的操作DOM,会产生一定的性能问题,这就是虚拟DOM的产生原因.虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象状 ...
[Vue源码] Vue中diff算法原理
一. Vue中diff算法原理理解: 1.先同级比较,在比较子节点 2.先判断一方有儿子一方没儿子的情况 3.比较都有儿子的情况 4.递归比较子节点图: 1.原节点:ABCD,新节点:ABCDE, ...
详解vue的diff算法
前言目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,一起来get吧. 先来了解几个点... 1. 当数据发生变化时,vue是怎么更新节点的? 要知道渲染真实 ...
Vue之diff算法
前言 Vue通过双向绑定来实现数据驱动视图更新,当数据更新会触发Dep对象notify通知所有的订阅者Watcher对象,Watcher对象最后会调用run来执行Watcher对象的getter方法. ...
【vue】diff 算法详解
一.diff算法是什么 diff算法是一种通过同层的树节点进行比较的高效算法 diff算法的目的就是找出新旧不同虚拟DOM之间的差异,使最小化的更新视图,所以 diff 算法本质上就是比较两个js对象 ...
VUE DIFF算法之快速DIFF
VUE DIFF算法系列讲解 VUE 简单DIFF算法 VUE 双端DIFF算法文章目录 VUE DIFF算法系列讲解前言一.快速DIFF的代码实现二.实践练习1 练习2 总结前言本节我 ...

vue的diff 算法

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

vue的diff 算法相关推荐

最新文章

热门文章