部分vue3的ui框架使用的是jsx的语法,是不是意味着放弃了编译优化?

Question

vue3.0的SFC模板支持编译的优化,例如只更新动态内容,对静态节点进行提升等。而查看部分ui框架的源码时,使用的是jsx的方式,这是不是表示放弃了vue的编译优化

Answer 1

使用 JSX 的话，并不意味着放弃了编译优化。Vue 3 的 JSX 编译器也做了很多基于 template 分析的优化，比如 PatchFlag 和 tree-shaking。但是，使用 JSX 的话，可能需要手动进行一些优化操作，比如提取静态的 JSX 片段到 render 函数外部。

Answer 2

不一定。虽然Vue 3.x默认使用的是template语法，但Vue 3.x也支持使用JSX语法。在使用JSX语法时，Vue 3.x会调用对应的编译器，将JSX代码转换为渲染函数。这个过程也会触发Vue 3.x的编译优化，从而提高应用程序的性能。

然而，相比于使用template语法，使用JSX语法需要更多的工作量来进行优化。因为JSX需要手动指定标签的属性，Vue 3.x的编译器无法像template语法那样对属性进行静态分析和优化。因此，如果不小心使用JSX语法，可能会导致性能下降。但如果开发者有足够的经验并正确使用JSX语法，还是可以实现很好的性能表现的。