聊一聊"TSX"与"Template"

“Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。” 传送门

template：

优点：

• 可读性高
  • 基于 dom 结构，很容易就可以看清楚代码要表达的意图（当然，写的一窝粥的除外）
  • 通过 vue 的指令和语法，一眼就能确定逻辑在哪里

缺点：

• 不够灵活

  • 也是一直被大家吐槽的点，过于笨重，结构固定

• SFC 享受不到 props 类型提示

  (Vue的单文件组件SFC(single-file-component)指的是.vue结尾的文件,内容中通常包含三个块
  template(模板块)  script(js脚本块)  style(样式块))

  • 受限于 SFC，组件在外部使用时 vscode 无法做出 props 的类型提示
  • 这一点对于组件库来讲是个痛点，我希望用户在使用组件时可以享受到 props 的类型提示

jsx/tsx:

优点：

• 灵活，表达能力强
  • 可以利用 js 来表达各种各样的逻辑，十分灵活
• 可享受 props 类型提示
  • 如果是用 tsx 编写的组件，用户是可以享受到 props 的类型提示的
• 可以把组件/标签当做普通属性传来传去

缺点：

• 编译优化？

  • 这一点也是大家质疑的点，担心如果使用 jsx 的话，是不是享受不到模板编译的优化了
  • 如果按照 @vue/babel-plugin-jsx 这个插件提供的 explorer 来看的话是可以享受到模板编译优化的

• 可读性差

• 这个其实也是过于灵活带来的后遗症，就是因为太灵活了，大家怎么写的都有，很容易出现坏味道

• 要不就在 setup 中通过函数返回，要不就在 render 函数中实现，

  • 但是如果你在 setup 中直接返回的话，其实是破坏了 setup 返回对象作为 view 和 model 层的接口，而且如果是 ref 类型的响应式对象的话，你还必须使用 .value ,享受不到结构 ref 了。你会发现你的代码可读性极差，
  • 我更推荐在 render 中实现
    • 但是你调用的时候必须要加个 render(ctx), ctx 相当于是 this，还是不如在 template 中干净