前言

让程序员爽到爆的jsx语法，vue3快速过度tsx，除了一下介绍的tsx用法，其他用法都与vue3的用法没有区别。tsx需要学习的东西并不多，只是稍微改变了开发的习惯。取消了模板语法，让我们能像写javascript一样书写页面。

工程搭建

执行 npm init vue 创建工程

工程地址

gitee.com/z-shichao/v…

组件定义 defineComponent

在 Vue 3 中，defineComponent 是一个用于定义组件的函数 API。它的作用有几个方面：

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

tsx语法

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

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

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

使用选项语法还是函数语法主要根据个人习惯，下边案例使用选项式讲解。

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

插值语法

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>
    </>)
  }
})

使用单括号{}

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 items = ['张三', '李四', '王五']
    return () => (<>
      {items.map((item) => <div>{item}</div>)}
    </>)
  }
})

注意：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>
}

优点：

1. 类型安全性：使用 TypeScript 结合 TSX 可以提供更好的类型安全性，能够在编译时发现并防止一些常见的错误，如属性类型不匹配、不存在的属性等。
2. 更灵活的语法：TSX（或 JSX）语法更加灵活，可以直接在 JavaScript 中编写 HTML 结构，使得组件的编写更加简洁和直观。
3. 更好的 IDE 支持：TypeScript 的类型系统使得 IDE 能够提供更好的代码提示、自动补全和错误检查，提高了开发效率。
4. 组件复用性：TSX（或 JSX）语法可以让组件更易于复用，因为它们更接近于 JavaScript 语法，可以更方便地通过 JavaScript 函数来生成组件。

缺点：

1. 学习曲线：对于不熟悉 TypeScript 的开发者来说，学习 TSX（或 JSX）的语法和 TypeScript 的类型系统可能需要一定的时间和精力。
2. 构建配置：如果项目中还未使用 TypeScript，引入 TSX 需要进行相应的构建配置，包括安装 TypeScript 相关依赖、修改 webpack 配置等，可能会增加一些额外的工作量。
3. 性能影响：相比于模板编译，TSX（或 JSX）语法在运行时需要经过额外的转换和编译，可能会对性能产生一定的影响，尤其是在大型项目中。
4. 与模板的差异：TSX（或 JSX）语法与 Vue 的模板语法有一定的差异，可能需要一定的适应时间，并且不支持一些模板特有的语法和指令。

总的来说，TSX（或 JSX）在 Vue 中的使用提供了更好的类型安全性和灵活性，但也需要权衡其引入的学习曲线和对构建配置的影响。在选择是否使用 TSX（或 JSX）时，需要根据项目的实际需求和团队的技术栈来进行权衡和决策。

原文链接：https://juejin.cn/post/7352763168902578230 作者：用户1585826119852