template vs jsx

概念

template

在vue中，用于声明组件的字符串模板（模板语法），有大量vue指令支持，可以快速构建页面。

jsx

使用render函数编程式地创建组件虚拟 DOM 树。

优缺点

template

优点：由于在vue中，有大量指令的支持，使用template模板语法可以快速，简单的开发页面，上手简单
缺点：灵活性低

jsx

优点：jsx语法以编程的形式创建虚拟dom，然后转换为真实dom，这样做的好处就是十分灵活，可以在逻辑上无限优化，转换
缺点：上手困难，需要有丰富的js编写经验

总结

在我们编写组件的时候，往往可以将组件分为两类：偏展示类和偏逻辑类。对于偏展示类的组件我们可以使用template语法快速构建，对于偏向逻辑类的组件建议使用jsx语法，可以更灵活的适应各个场景。