TSX语法简单封装一个Icon组件
jsx VS template
jsx语法相比较template语法 怎么说呢 适应场景不一样吧
template更适合页面的排版 清晰可见的页面布局 vue的官方也推荐template语法
jsx更适合业务逻辑的处理 更像是js里面写html代码 而template更像是html里写js代码
优缺点
jsx：
优点：可以更加专注与业务逻辑的实现 业务逻辑的表达十分清晰 （更适合写业务逻辑）
缺点：页面排版布局不清晰 同时需要放弃vue的部分语法糖（v-if v-for v-model 等等）也放弃了vue编译阶段的优化（静态提升）
讲点题外话 v-model的实现：取值，事件和赋值。
template：
优点：页面排版布局清晰可见 （更适合写布局）
缺点：在处理复杂的业务逻辑的时候明显感到吃力
结论：在平常项目中建议使用template语法 感觉工作中大部分时间都是在写布局 哈哈 也没那么多的业务逻辑需要写（大量第三方插件 类库的出现 解放了大部分程序员的劳动力）
jsx更适合造轮子的程序员使用
vue3.0 tsx写法
setup里
变量在当前作用域
或者render里
变量在vue实例上 需要this访问
icon.tsx
引入iconfont并全局挂载组件Icon
使用组件
效果（组件还有待完善。。。）
OK 打完收工
持续更新。。。欢迎关注
接下来将以更多实战 来讲解vue3.0高阶用法