vue -- hoistStatic原理
💡
原文中文，约10900字，阅读约需26分钟。
📝
内容提要
本文解读了Vue 3中hoistStatic静态节点提升的实现。hoistStatic在编译时将静态节点提升到render函数外部，从而优化大型应用的性能。通过递归遍历静态节点，提升可复用的元素和文本节点，减少运行时创建开销，提高渲染效率。
🎯
关键要点
- hoistStatic是在编译时将静态节点提升到render函数外部的功能，优化大型应用的性能。
- 通过递归遍历静态节点，提升可复用的元素和文本节点，减少运行时创建开销。
- 提升的节点只会被创建一次，后续渲染时会复用这些节点。
- 只有纯元素节点和文本节点才会被提升，动态元素的props也可能被提升。
- 提升后的节点会打上patch标记，以便在后续渲染中识别。
- 整个子元素都可以提升的情况下，重新创建子节点以优化性能。
❓
延伸问答
hoistStatic的主要功能是什么？
hoistStatic在编译时将静态节点提升到render函数外部，以优化大型应用的性能。
hoistStatic如何提高渲染效率？
通过递归遍历静态节点，提升可复用的元素和文本节点，减少运行时创建开销。
哪些节点可以被提升？
只有纯元素节点和文本节点可以被提升，动态元素的props也可能被提升。
提升后的节点是如何处理的？
提升后的节点只会被创建一次，后续渲染时会复用这些节点，并打上patch标记以便识别。
hoistStatic对性能的影响是什么？
hoistStatic通过减少运行时创建开销，显著提高大型应用的渲染性能。
在什么情况下会重新创建子节点？
在整个子元素都可以提升的情况下，会重新创建子节点以优化性能。
➡️
