Vue3 Compiler 优化细节,如何手写高性能渲染函数

web前端开发

共 24072字,需浏览 49分钟

 ·

2021-11-15 18:44


vue3 的 Compiler 与 runtime 紧密合作,充分利用编译时信息,使得性能得到了极大的提升。
本文的目的告诉你 vue3 的 Compiler 到底做了哪些优化,以及一些你可能希望知道的优化细节,在这个基础上我们试着总结出一套手写优化模式的高性能渲染函数的方法,这些知识也可以用于实现一个 Vue3 的 jsx babel 插件中,让 jsx 也能享受优化模式的运行时收益,这里需要澄清的是,即使在非优化模式下,理论上 Vue3 的 Diff 性能也是要优于 Vue2 的。
另外本文不包括 SSR 相关优化,希望在下篇文章总结。
篇幅较大,花费了很大的精力整理,对于对 Vue3 还没有太多了解的同学阅读起来也许会吃力,不妨先收藏,以后也许会用得到。
按照惯例 TOC:
Block Tree 和 PatchFlags
传统 Diff 算法的问题
Block 配合 PatchFlags 做到靶向更新
节点不稳定 - Block Tree
v-if 的元素作为 Block
v-for 的元素作为 Block
不稳定的 Fragment
稳定的 Fragment
v-for 的表达式是常量
多个根元素
插槽出口