Vue3-JSX与template的区别

• 语法上有大区别
  • jsx 就是js代码
  • template 只能使用简单的js 表达式，其他需要指令去完成 如 v-if
  • JSX 已经成为ES规范，但是template只是vue的规范

#

• 最终的目标是相同
  • 最后都是编译成为js代码，render函数-->生成虚拟dom-->渲染UI

功能	template	jsx
插值	{{}}	{}
组件引用(DemoComponent)	<demo-component /> <DemoComponent />	<DemoComponent />(是啥就引用啥)
传递属性和事件	<DemoComponent name="zhangsan" /> <DemoComponent :name="name" />	<DemoComponent name="zhangsan" /> <DemoComponent name={nameVal} />
事件	<DemoComponent @click="handleClick" />	<DemoComponent onClick={handleClick} />
条件语句	<DemoComponent v-if="flag" />	{ flag && <DemoComponent />}
循环语句	<li v-for="item in list" :key="item"></li>	{state.list.map(item =><li>{item}</li>)}