vue3+ts+tsx的使用与好处(语法方面:tsx==jsx)

前言:

        整理分享下vue3+ts+tsx相关的资料,有react使用经验的小伙伴应该更能理解这个的好处,终于在vue3中也支持了,相当于函数的方法来操作界面。

1、vue3项目中为什么要用tsx(等同于我们react的jsx)

  1. 类型安全:TSX 可以帮助开发者在编写代码的过程中检测类型错误,减少运行时错误的发生,并提高代码可维护性。

  2. 更好的代码提示:在使用 TSX 编写代码时,开发者可以享受到更好的编码提示和自动补全功能,从而提高编写代码的效率。

  3. 更容易维护:在使用 TSX 编写代码时,代码结构更加清晰明了,可读性更高,使得代码的维护更加容易。

  4. 容易与 React 生态系统集成:TSX 是 React 生态系统中广泛使用的一个技术栈,使用 TSX 可以更容易地与其它开源组件和库进行集成和协作。

2、他的用法和我们常规的vue3+ts使用有什么区别

  1. 语法:Vue 3 的模板语法和 TSX 的语法是不同的,Vue 3 的模板语法更接近于 HTML,而 TSX 的语法更接近于 JavaScript。

  2. 类型检查:TSX 依赖于 TypeScript,可以使用 TypeScript 的类型检查功能来减少代码中的错误,而 Vue 3 的模板语法没有这种类型检查功能。

  3. 可读性:TSX 的语法更接近于 JavaScript,对于熟悉 JavaScript 的开发者来说,可能更容易阅读和理解 TSX 的代码。但同时也可能会感到 TSX 的语法更繁琐,对于不熟悉 TypeScript 的开发者来说学习曲线可能会更陡峭。

  4. 性能:使用 TSX 编写 Vue 3 组件可能会比使用模板语法的组件具有更好的性能。因为 TSX 可以直接将组件转换为纯 JavaScript 代码,而模板语法需要在运行时进行解析和编译。

        总的来说,使用 TSX 可以使代码更可读性更好,具有类型检查等优势,但也需要引入 TypeScript,并且需要开发者对 TypeScript 有一定的了解。而使用 Vue 3 的模板语法则更加接近于 HTML,对于前端开发者来说更加直观,但可能会牺牲一些性能。具体使用哪种方式需要根据项目需求和开发者技能来决定。

3、项目中的安装部署

1、安装, babel-plugin-jsx

npm insatll @vue/babel-plugin-jsx --save

2、在项目的 babel.config.js 文件的plugins中添加配置:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    '@vue/babel-plugin-jsx'
  ]
}

4、具体使用的一些方法分享(使用他与不使用做对比)

1、最重要的一点,他的模块是通过setup的return返回的

import { defineComponent, ref, reactive } from 'vue'

export default defineComponent({
  props: {
  },
  setup(props) {
    const msg = ref('hello tsx')
    const state = reactive({
      count: 1
    })

    return () => {
      return 
{msg.value} {state.count}
} } })

2、元素上绑定,{} 加内容

vue文件:


tsx文件:

3、v-if  必须用三木运算,或者是  &&

vue文件:
tsx文件,js逻辑代码必须用大括号包裹: { flag ?
: null }
isActive && 

123

//意思就是, isActive === true的情况下,展示 && 后面的标签 isActive && title==='123' &&

123

//意思就是, isActive === true && title==='123' 的情况下,展示 && 最后面的标签

4、v-for

vue文件:
  • {{item}}
tsx文件:
    { list.map((item) => { return
  • {item}
  • }) }

5、点击事件等绑定,有点像原生了,onScroll  ,on

vue文件:
tsx文件:
onMouseenter={handleMouseEnter} onMouseleave={handleMouseLeave}

6、子传父

vue:
子组件:
emit('custom')

父组件:



tsx:
子组件:
emit('custom')

父组件:

5、api文档分享

使用 JSX 书写标签语言 – React 中文文档

你可能感兴趣的:(vue3.0,vue.js,前端,javascript)