区别：
1. 语法区别：
- jsx 是js的语法扩展，更接近js
- 直接在jsx中通过if、map实现
- 用
{}花括号方式嵌入变量
- template： 是html语法的扩展；
- 使用v-if指令 实现条件渲染；使用v-for 实现循环等功能
- 用
{{}}插值表达式嵌入变量
2. 编译方面：
- jsx 需要babel编译成js语言：通过react.creatElement才能在浏览器运行
- vue template 由vue的模版编译器处理，编译成渲染函数，最终渲染成真实的dom
3. 数据绑定方面：
- jsx： React是单向数据流可以使用
{this.state.name} - vue template ： 使用v-model 指令可以实现数据双向绑定
4.性能方面：
- jsx：性能和渲染机制与js执行效率有关，复杂应用中，如果不合理优化，频繁更新会引起不必要的渲染；可以使用React.Memo() 提升性能；
- vue tempalte：基于vue的响应式能精准更新
vue template 的好处是什么?
-
逻辑和视图分离 ：jsx 的话太复杂的情况下可读性比较差
-
响应式数据绑定直观： 使用v-model 指令清晰实现双向数据绑定
-
组件化便利：可以方便的复用组件
vue3 在编译的时候，会进行静态分析，diff时增加静态标记，静态提升； 提供事件监听缓存函数； 这样的话会跳过静态节点的处理，在渲染大量重复结构下， 能有效提升渲染效率，节省性能开销；
总的来讲，jsx和vue template 在语法方面有些差别；编译方面jsx需要babel转义；vue template的静态模版编译； jsx 是嵌入到视图中的js逻辑，耦合性比vue 的template高，vue template使用指令v-if、v-for、v-model 数据绑定，精准更新；
