极致爽文,tsx语法应用vue

前言

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

工程搭建

执行 npm init vue 创建工程

极致爽文,tsx语法应用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 返回的元素中必须要有一个根标签,如果不想携带跟标签 可以用<></>代替,<></>不会在页面渲染。

插值语法

极致爽文,tsx语法应用vue

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

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

事件绑定

极致爽文,tsx语法应用vue

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

使用单括号{}

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

v-bind:使用{}包裹
极致爽文,tsx语法应用vue

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要写在{}里面,返回值是是一个可渲染的元素或元素组成的数组。

插槽

默认插槽

极致爽文,tsx语法应用vue

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

具名插槽

极致爽文,tsx语法应用vue

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

作用域插槽
极致爽文,tsx语法应用vue

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

(0)
上一篇 2024年4月2日 上午10:17
下一篇 2024年4月2日 上午10:27

相关推荐

发表评论

登录后才能评论