Vue Diff原理

  • 概念:
	概念:Diff算法是一种同层的树节点进行比较的高效算法,避免对树的逐层遍历,
减少时间复杂度。如Vue虚拟DOM渲染生成真实DOM的新旧VNode比较更新。
	Diff算法的两个特点:
		只会同级比较,不跨层级
		Diff比较循环两边往中间收拢

  • Vue DIff算法核心:
	Vue的虚拟DOM核心在于patch过程:
		* 首先将新旧VNode进行开始位置和结束位置的标记
		* 标记好节点的位置,进行循环处理节点
		* 递归处理
			新旧开始指针比较
			新旧结束指针比较
			旧开始指针与新结束指针
			旧结束指针与新开始指针
  • 总结:
	每次Diff都会调用updateChildren方法来比较,就这样层层递归下去,
知道将旧VNode和新VNode中所有子节点比对完。DOMDiff的过程更像是两个
树的比较,没找到相同节点时,都会一层一层的往下比较它们的子节点,是
一个深度递归遍历比较的过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值