前言

JSX语法让程序员体验到前所未有的舒爽，而在Vue3中，快速过渡到TSX也是轻而易举的。除了下文介绍的TSX用法外，其他方面与Vue3的使用方式并无二致。TSX所需学习的内容并不繁杂，只是稍微改变了开发习惯，取消了模板语法，让我们能够像编写JavaScript一样书写页面。

工程搭建

通过执行npm init vue来创建一个Vue工程。

工程地址

你可以在以下地址找到本文使用的工程示例：gitee.com/z-shichao/v…

组件定义：defineComponent

在Vue3中，defineComponent是一个用于定义组件的函数API。它的作用主要有三个方面：

1. 创建组件选项对象：defineComponent允许你定义一个包含组件配置信息的选项对象，如组件的属性、方法、生命周期钩子等。
2. 类型推断支持：使用defineComponent可以帮助TypeScript更好地推断组件的类型，从而提高开发效率和代码的健壮性。
3. 提供组件定义上下文：defineComponent内部对组件选项对象进行一些处理，包括生命周期钩子的转换、模板的编译等，从而提供了一个统一的组件定义上下文，使得组件的定义更加清晰和一致。

tsx语法

tsx有种书写模式：函数语法，选项语法

//选项式
import { defineComponent } from "vue"
export default defineComponent({
  setup() {
    return () => (<div>vue3+tsx</div>)
  }
})

//函数式
export default defineComponent(() => {
  return () => (<div>vue3+tsx</div>)
})

使用选项语法还是函数语法主要取决于个人习惯。下文示例将使用选项式进行讲解。

注意：返回的是一个函数，在函数中返回的是一个JSX元素。JSX元素中必须有一个根标签。如果不想使用根标签，可以使用<></>代替，该标签不会在页面中渲染。

插值语法

export default defineComponent({
  setup() {
    let text = ref<string>('我是文本内容')
    return () => (<div>{text.value}</div>)
  }
})

注意：使用ref定义响应式数据时，在模板中需要使用.value来访问。

事件绑定

export default defineComponent({
  setup() {
    let text = '我是文本内容'
    return () => (<>
    <div >{text}</div>
    <button onClick={() => { alert('您点击了我')}}>点我</button>
    </>)
  }
})

事件修饰符

后边加驼峰事件修饰符

export default defineComponent({
  setup() {
    let text = '我是文本内容'
    return () => (<>
    <div >{text}</div>
    <button onClickStop={() => { alert('您点击了我')}}>点我</button>
    </>)
  }
})

注意：使用大括号{}进行插值，使用on+事件名（小驼峰命名法）进行事件绑定，自定义事件也是一样的。

jsx中移除了部分指令：v-bin、v-for、v-if

v-bind：使用大括号{}进行包裹

export default defineComponent({
  setup() {
    let text = '我是文本内容'
    let style = {
      background: 'red'
    }
    return () => (<>
      <div style={style} >{text}</div>
      <button onClick={() => { alert('您点击了我') }}>点我</button>
    </>)
  }
})

• v-for：使用数组方法map

export default defineComponent({
  setup() {
    let items = ['张三', '李四', '王五']
    return () => (<>
      {items.map((item) => <div>{item}</div>)}
    </>)
  }
})

v-if：使用三元表达式

export default defineComponent({
  setup() {
    let isShow = ref<boolean>(true)
    return () => (<>
      <div>{isShow.value ? <div>我出来饿了</div> : ''}</div>
      <button onClick={() => { isShow.value = !isShow.value}}>点我</button>
    </>)
  }
})

注意：js要写在{}里面，返回值是是一个可渲染的元素或元素组成的数组。

插槽

默认插槽

import { defineComponent, ref } from "vue"
export default defineComponent({
  setup(props, { slots }) {
    let text = ref<string>('我是默认插槽')
    return () => (<Child>{text.value}</Child>)
  }
})
let Child = (props: any, { slots }: any) => {
  return <div>{slots.default()}</div>
}

具名插槽

import { defineComponent, ref } from "vue"
export default defineComponent({
  setup(props, { slots }) {
    let text = ref<string>('我是默认插槽')
    return () => (<Child>
      {{
        default: () => text.value,
        name1: () => '我是插槽1',
        name2: () => '我是插槽2'
      }}
    </Child>)
  }
})
let Child = (props: any, { slots }: any) => {
  return <div>
    <div>{slots.default()}</div>
    <div>{slots.name1()}</div>
    <div>{slots.name2()}</div>
  </div>
}

作用域插槽

export default defineComponent({
  setup(props, { slots }) {
    let text = ref<string>('我是默认插槽')
    return () => (<Child>
      {{
        default: () => text.value,
        name1: () => '我是插槽1',
        name2: (parms: string) => <div>
          {parms}
        </div>
      }}
    </Child>)
  }
})
let Child = (props: any, { slots }: any) => {
  let parms: string = '我是参数'
  return <div>
    <div>{slots.default()}</div>
    <div>{slots.name1()}</div>
    <div>{slots.name2(parms)}</div>
  </div>
}

还可以通过props传参向子组件传递元素

import { defineComponent, ref } from "vue"
export default defineComponent({
  setup(props, { slots }) {
    let text = ref<string>('我是默认插槽')
    return () => (<Child
      childs={[
        <div >我是一</div>,
        <div >我是二</div>
      ]}></Child>)
  }
})
let Child = (props: any, { slots }: any) => {
  return <div>
    <div>{props?.childs[0]}</div>
    <div>{props?.childs[1]}</div>
  </div>
}

使用css scoped

在Vue 3 中，如果想要在 TSX 文件中使用 CSS scoped 样式，通常不能直接在 TSX 文件中实现 scoped 样式。你可以在 .vue 单文件组件中的 <script> 标签中编写 TSX 代码，并且将 <script> 标签的 lang 属性设置为 'tsx'，然后在 <style> 标签中添加 scoped 属性来实现 scoped 样式。

<script lang="tsx">
import { defineComponent } from "vue"
export default defineComponent({
    setup() {
        return () => (<>
            <div class='text'>css scoped</div>
        </>)
    }
})
</script>
<style scoped>
.text{
    background: red;
}
</style>

vue3+tsx中定义props：

import { defineComponent, PropType } from "vue"
export default defineComponent({
    setup() {
        return () => (<>
            <div>我是父组件</div>
            <Text name={'我 是 传进来的name'} />
        </>)
    }
})
//子组件
const Text = defineComponent({
   props:{
      name:{
      type:String as PropType<string>,
      required:true
      }
    },
    setup(props) {
        return () => (<>
            <div>{props.name}</div>
        </>)
    }

})
import { defineComponent ,PropType} from "vue"
export default defineComponent({
    setup() {
        return () => (<>
            <Text name='我 是 传进来的name' />
        </>)
    }
})

注意：在tsx中定义类型时，只能定义比较笼统的Object、String等，这种类型为什么比较笼统呢，因为在js语言中Object在任何变量的原型上都存在，当你定义一个Object时他就会和any类型时类似的，其他类型同理，当我们想要定义某个类型时，我们只能使用as+ PropType的形式。

简化props的使用：

首先要了解定义string会报错呢，因为我们使用了defineComponent帮我们进行了类型推断定义。那我们可不可以不使用，自己使用ts来规范我们的类型呢。当然可以！！！

方案一：

不适用defineComponent 自己使用ts来进行类型定义，但只支持函数语法和react用法几乎一样

可以看到使用ts也可以进行类型定义，并且更为简便。当然参数在子组件里也是可以定义接收的。缺点就是jsx中是不能使用这种方式的。

import { defineComponent } from "vue"
export default defineComponent({
    setup() {
        return () => (<>
            <div>我是父组件</div>
            <Text name='张三'/>
        </>)
    }
})
interface Props {
    name: string,
    age?: number
}
const Text = (props: Props, ctx: any) => {
    return <div>{props.name}</div>
}

方案二：

方案三：

使用# Vue Macros构建项目 vue-macros.dev/zh-CN/guide…

vue中jsx语法和模板语法的优缺点：

JSX语法：

优点：

1. 更灵活的语法： JSX允许在模板中使用JavaScript表达式，使得模板更加灵活和表达能力更强，更容易阅读和理解JSX的代码。
2. 组件逻辑更直观，易维护： JSX让组件的结构和逻辑更加紧密，因为你可以在组件中直接编写JavaScript逻辑，并且在同一个文件中可以写多个组件，将相关性较强的组件放在一起更易维护。
3. 性能较好： 使用JSX编写Vue 3组件会比使用模板语法的组件具有更好的性能。因为JSX可以直接将组件转换为纯JavaScript 代码，而模板语法需要在运行时进行解析和编译。性能差异不大。

缺点：

1. 学习曲线较陡： 对于新手来说，学习JSX语法可能需要一定的时间，特别是对于那些不熟悉React或其他使用JSX的框架的人来说。
2. 与HTML混合： 有些开发者可能觉得在JavaScript中嵌入HTML的方式不够直观，因为它打破了HTML和JavaScript的分离原则。
3. 与模板的差异：TSX（或 JSX）语法与 Vue 的模板语法有一定的差异，可能需要一定的适应时间，并且不支持一些模板特有的语法和指令。

模板语法：

优点：

1. 易于学习和上手： 模板语法更接近传统的HTML，因此对于初学者来说更容易理解和上手。
2. HTML代码直观： 模板语法使得HTML代码更加直观，可以更清晰地看到组件的结构。
3. 编辑器支持良好： 大多数编辑器对Vue模板语法有良好的支持，提供语法高亮、自动补全等功能。

缺点：

1. 表达能力受限： 模板语法相比于JSX在表达能力上受到一定的限制，因为因为它不能像JSX那样直接在模板中使用JavaScript表达式。
2. 组件与逻辑分离： 使用模板语法时，组件的结构和逻辑可能会分离得较为明显，因为一些逻辑需要放在JavaScript中，而不是直接嵌入模板中。

总的来说，选择JSX还是模板语法取决于个人的偏好、团队的技术栈以及项目的需求。在Vue 3中，JSX语法的支持更加完善，因此如果你对JavaScript更为熟悉，或者项目需要更高的灵活性和表达能力，那么可以考虑使用JSX语法。而对于简单的项目或团队中大多数成员都熟悉HTML的情况下，模板语法可能更为适合。