Vue 3 中的模板渲染与渲染函数 h()

Posted 2023-02-22

【中文标题】Vue 3 中的模板渲染与渲染函数 h()

【英文标题】：Template render vs render function h() in Vue 3

【发布时间】：2020-04-01 15:23:56

【问题描述】：

您如何看待 Vue 3（或 composition-api）中的模板渲染，尤其是它的速度和轻量级？

我们创建了一个站点构造器，其底层包含简单的组件（例如 ui-box、ui-button 等）。在 Vue 2 中，对于大多数组件，我们使用功能组件通过 h() 函数进行渲染，以便使它们的渲染更快更轻，因为我们期望场景中有很多这些组件。据我所知，在 Vue 3 中模板渲染会更快并且性能更好。

你怎么看？当 Vue 3 来的时候，我们还是应该使用 h() 还是可以使用通常的模板渲染？

【参考方案1】：

渲染函数的灵活性赋予了它们很大的功能，但它们的命令性质使它们难以（自动）优化。就个人而言，在使用 Vue 3 时，由于虚拟 DOM 差异优化，我尽可能使用模板。我发现的一个很好的概述是 Evan You，here。

最好的办法是对两者进行基准测试并查看性能，Vue.js Devtools 对此很有帮助。