如何在vue3中使用jsx

Question

请问一下在vue3中是否可以舍弃template，使用JSX，以更好地支持TS？JSX中还支持vue中的一些指令吗？比如说v-if、v-bind、v-for、slot标签这些？在JSX中使用css有没有什么好的解决方案？问题有点多，谢谢老师！

Answer 1

ustbhuangyi 2021-04-11 23:55:57

如果仅仅是支持 TS，那么用 Vue.js 3 使用模板也能很好的支持 TS，而且除非是一些特别灵活的场景，否则模板是要优于 JSX 的，因为它更加直观，且 Vue.js 3 在模板编译的时候可以做一些编译优化，具体可以看我写的这篇文章 https://mp.weixin.qq.com/s/pRCgBzN00-46X6CW6Fk7UQ

那么既然你用了 JSX，v-if 肯定是用 if，v-bind 就用 {} 替代，v-for 通常都是用 forEach，具体去看这个吧：https://github.com/vuejs/jsx-next

即使使用 JSX，也是可以用 .vue 单文件的方式，所以 CSS 仍然可以写在 style 区块内。

• 提问者 _驺虞 #1

  非常感谢！