虚拟Dom、diff算法、nextTick

虚拟dom本质上就是一个JS对象

真实的DOM有一堆的属性和方法,操作起来会导致性能很慢,而且每操作一次就会导致一次重绘和回流,虚拟DOM等数据全都更新完之后,只更新了真实DOM需要改变的地方,而且只会有一次重绘和回流

初次渲染页面的时,会根据数据创建一个虚拟DOM对象,根据虚拟DOM生成真正的DOM,渲染到页面上

数据变化后,会根据新的数据,再创建新的虚拟DOM

利用diff算法对两份虚拟dom进行对比

diff算法

diff算法可以看作是一种对比算法,diff算法可以找到新旧虚拟Dom之间的差异,并根据对比后的结果更新真实Dom。
用js对象结构(虚拟DOM)表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中,当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异,把所记录的差异应用到所构建的真正的DOM树上,视图就更新了
添加key唯一标识后Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
唯一标识,为了高效的更新虚拟DOM
transition过渡时,使用key属性,可以区分它们是否变化,否则vue只会替换其内部属性而不会触发过渡效果

第一种情况:元素(标签)变了,删除元素,重建新元素

第二种情况:元素没变,属性或内容变了,只更新属性或内容

第三种情况:使用v-for遍历的时候,有两种情况

$nextTick

简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,

当修改了数据,因为dom是异步的,所以如果在修改的数据下面重新操作dom会出问题,需要保证dom更新完成才能操作,用nextTick可以在dom渲染后,立即执行该函数。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue和React都使用了虚拟DOM(Virtual DOM)来进行更新,但它们在虚拟DOM更新的方式上有一些区别。 1. 更新策略: - Vue采用的是双向绑定的方式,它通过数据劫持和响应式系统来追踪数据变化,当数据发生变化时,Vue会重新渲染整个组件,并通过diff算法来计算需要更新的最小DOM操作。 - React采用的是单向数据流的方式,它通过使用状态和属性的改变来触发组件的重新渲染,并通过diff算法来计算需要更新的最小DOM操作。 2. 更新粒度: - Vue的更新粒度更细,它可以对组件内的某个具体的数据进行更新,只重新渲染该数据所影响的部分DOM,而不是整个组件。 - React的更新粒度相对较粗,它一般会重新渲染整个组件,然后通过diff算法来计算需要更新的最小DOM操作。 3. 批量更新: - Vue在更新过程中会对数据变化进行批量处理,通过异步更新队列(nextTick)来实现,这样可以将多个数据变化合并为一次更新,减少了不必要的DOM操作。 - React在更新过程中,默认是同步更新,即每次数据变化都会立即触发组件的重新渲染,但它也提供了批量更新的方式,可以手动使用setState的回调函数或使用React的批量更新API(如unstable_batchedUpdates)来实现批量更新。 总体来说,Vue和React在虚拟DOM更新上有些许差异,但它们的目标都是尽可能高效地更新DOM,提高页面的性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值