Vue3使用JSX/TSX

文章目录

• 1. 什么是 JSX & TSX?
• • JSX（JavaScript XML）
  • TSX（TypeScript XML）
  • 2.Vue3 中使用 TSX
  • • 基本渲染 & 响应式 & 事件
    • 3.JSX 和 template 哪个好呢？
    • • ���结

        ---

        1. 什么是 JSX & TSX?

        提示：JSX & TSX

        • JSX是Facebook专门为react发明的一种新的类似于XML格式的语言，它 是JavaScipt的语法拓展。
        • 它使用XML标记的方式去直接声明界面，然后再利用编译器转换成JS语言。但是Vue 早就能使用 JSX 去编写页面了~
        • 并且现在大部分都是使用 Typescript 来写项目，所以 TSX 会用的更多

          JSX（JavaScript XML）

          • JSX是一种JavaScript的语法扩展，它允许在JavaScript代码中编写类似于XML或HTML的结构。
          • JSX使得在React中编写UI组件更加直观和易于理解，它可以帮助开发人员将UI的结构和逻辑更清晰地表达出来。
          • 在JSX中，可以直接在JavaScript代码中使用类似HTML的标签来描述UI组件的结构，并且可以在标签中嵌入JavaScript表达式，以动态地生成UI内容。

            TSX（TypeScript XML）

            • TSX是JSX的TypeScript版本，它提供了与JSX相同的功能，并添加了对类型的支持。
            • TypeScript是JavaScript的一个超集，它引入了静态类型检查，使得代码更具可维护性和安全性。
            • 在TSX中，可以像在JSX中一样编写UI组件，并且可以利用TypeScript的类型系统来提供更好的代码提示、错误检查和重构支持。

              ---

              2.Vue3 中使用 TSX

              我是使用了 Vue3 + Vite + TS 的项目，想要在项目中使用 TSX ，需要安装一个 Vite 插件

              pnpm i @vitejs/plugin-vue-jsx -D

              安装完毕后，需要在 vite.config.ts 中去进行插件配置

              // vite.config.tsimport vueJsx from@vitejs/plugin-vue-jsx';

              // vite.config.tsreturn defineconfig({base: './',plugins:[VitePluginGitInfo()vue({script:{propsDestructure: true,defineModel: true},})vueJsx()，//加上插件

              配置完就可以写 TSX 啦！！！

              基本渲染 & 响应式 & 事件

              我们可以新建一个 TsxComp.tsx 文件，来写 TSX 。写 TSX 可以不在 Vue文件 中去写

              // TSXComp.tsximport { definecomponent, ref }from 'vue';import {Button }from 'ant-design-vue';export default definecomponent({setup(){// setup 中负责管理数据const count = ref(1);const onclick=()=>{count.value++;};return {count,onclick,};render(){//在 render 函数中去写 TSXreturn ({this.count}this.onclick}点击);},});

              接着我们可以去渲染这个组件

              可以看到基本的 渲染 & 响应式 & 事件 已经实现

              3.JSX 和 template 哪个好呢？

              • JSX 性能好是指的编译快，编译快其实是构建时，但是真正的性能好是运行时 Vue
              • 在进行template模板编译的时候，会做各种优化，这些优化虽然会耗费构建时间，也就是构建时会比较慢，但是这些优化运用到最后产物的运行时的时候会大大提升性能

                总结

                • JSX构建更快，但是性能较差
                • template构建更慢，但是性能较好

                  ---

                  原文连接