#每日快讯#
①:新款特斯拉Model Y高性能版无伪装谍照 预计0-100/h加速3.2秒
②:6月30日正式上市 配置升级 新款MG5实车亮相
③:售52.18万起 2025款奥迪S4 Avant正式上市 标配抬头显示
④:或针对配置升级 新款起亚赛图斯将于7月2日上市 现款售10.99万起
⑤:2025款欧拉好猫/好猫GT木兰版将于6月27日上市 预售8.98万元起
#每日快讯# Vue3 Diff算法和 Vue2 的区别
我们知道在数据变更触发页面重新渲染,会生成虚拟 DOM 并进行 patch 过程,这一过程在 Vue3 中的优化有如下
编译阶段的优化:
事件缓存:将事件缓存(如: @click),可以理解为变成静态的了
静态提升:第一次创建静态节点时保存,后续直接复用
添加静态标记:给节点添加静态标记,以优化 Diff 过程
由于编译阶段的优化,除了能更快的生成虚拟 DOM 以外,还使得 Diff 时可以跳过"永远不会变化的节点",Diff 优化如下
Vue2 是全量 Diff,Vue3 是静态标记 + 非全量 Diff
使用最长递增子序列优化了对比流程
根据尤大公布的数据就是 Vue3 update 性能提升了 1.3~2 倍
我们知道在数据变更触发页面重新渲染,会生成虚拟 DOM 并进行 patch 过程,这一过程在 Vue3 中的优化有如下
编译阶段的优化:
事件缓存:将事件缓存(如: @click),可以理解为变成静态的了
静态提升:第一次创建静态节点时保存,后续直接复用
添加静态标记:给节点添加静态标记,以优化 Diff 过程
由于编译阶段的优化,除了能更快的生成虚拟 DOM 以外,还使得 Diff 时可以跳过"永远不会变化的节点",Diff 优化如下
Vue2 是全量 Diff,Vue3 是静态标记 + 非全量 Diff
使用最长递增子序列优化了对比流程
根据尤大公布的数据就是 Vue3 update 性能提升了 1.3~2 倍
展开
评论
点赞