虚拟dom+diff算法---个人理解

本文详细介绍了Vue中虚拟DOM的生成过程及其如何利用diff算法进行高效的DOM更新。从vnode函数生成虚拟DOM到diff算法的具体实现,再到数据变化时的虚拟DOM更新流程,深入剖析Vue的数据劫持及更新机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

虚拟dom通俗理解就是一个js的对象;了解到在vue中产生虚拟dom是在created和beforeMount之间生成,期间通过触发vue的render函数在其中会执行h函数在h函数中会触发vnode函数来生成虚拟dom。之后就是当数据发生变化的时候生产新的vdom,新旧vdom通过diff算法进行对比。
         个人理解就是将模板中的标签也就是dom,通过vnode函数将dom转换成一个对象的形式利于后期进行diff算法的比较,这个虚拟dom类似于js对象的形式也更像是一个树的形式。在diff算法中就是通过二叉树的先序深度优先遍历为基准进行比较,在diff算法中首先会触发patch函数进行比较新旧vdom的根节点,如果根节点不同就会再次触发patchVnode函数进行比较他的子节点,如果子节点不同进行删除或者增加的操作;如果子节点相同会再次触发去比较下一级执行updateChildren,也是以一个树的形式去进行比较(具体被绕晕了),总体的步骤是patch -> patchVnode -> updateChildren -> patchVnode -> updateChildren 进行循环。
          vue的数据的数据更新是通过object.defineProperty中的getter和setter进行监听到具体是哪个组件发生变化,在这个组件中再应用diff算法进行数据数据更新,所以vue是通过数据劫持+diff算法进行的数据更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值