首页 前端知识 极致爽文,tsx语法应用vue

极致爽文,tsx语法应用vue

2024-08-15 22:08:21 前端知识 前端哥 372 614 我要收藏

前言

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

工程搭建

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

图片.png

工程地址

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

组件定义:defineComponent

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

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

这里有个专门讲解defineComponent的文章 :https://juejin.cn/post/6994617648596123679

tsx语法

tsx有种书写模式:函数语法,选项语法

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

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

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

插值语法

图片.png

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

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

事件绑定

图片.png

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

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

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

v-bind:使用大括号{}进行包裹
图片.png

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:使用三元表达式

图片.png

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

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

插槽

默认插槽

图片.png

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>
}
具名插槽

图片.png

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>
}
作用域插槽

图片.png

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 样式。

图片.png

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

图片.png

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用法几乎一样

图片.png

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

图片.png

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

方案二:

混编
这个有篇文章可以看一下
https://juejin.cn/post/7143053446365577253?searchId=202404031524149C416A3419D9B87C6B19

方案三:

使用# Vue Macros构建项目
https://vue-macros.dev/zh-CN/guide/getting-started.html

图片.png

图片.png

优点:

  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://www.qianduange.cn//article/15715.html
标签
评论
发布的文章

JQuery 详细教程

2024-08-21 22:08:08

jQuery2 高级教程(八)

2024-08-21 22:08:06

jQuery Spellchecker 使用教程

2024-08-21 22:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!