Vue 项目中选择 TSX 而非传统 .vue 文件的原因分析

更新时间：2024年11月09日 16:48:03 作者：代码里的小猫咪

文章探讨了Vue项目中使用TSX（TypeScript JSX）的背景、优势和局限性,TSX结合了TypeScript和JSX,增强了类型安全和代码组织性,但也增加了学习曲线和可读性问题,对于复杂应用,TSX提供了更大的灵活性和类型支持,逐渐成为一些开发者的选择

1. TSX 与 Vue 的结合背景

1、Vue 3 和 TypeScript

Vue 3 从设计之初便更好地支持 TypeScript。Vue 3 使用了 TypeScript 重写核心，增强了类型推断和类型安全的支持，使得 TypeScript 更适合与 Vue 3 配合使用。

2、组合式 API

Vue 3 推出组合式 API，使代码逻辑更加模块化，也更接近于函数式编程的风格，这让代码结构更贴近 TSX 的写法，方便在 TypeScript 和 JSX 中组织逻辑。

2. 简单的示例 🌰

下面结合几个具体的 🌰 详细说明在 Vue 中使用 TSX 和传统 .vue 文件之间的差异。

2.1 基础组件

假设需要创建一个简单的用户卡片组件，用于显示用户的姓名和年龄。

1、使用 .vue 文件编写

.vue 文件的模板语法非常适合这种简单的展示性组件，因为结构清晰，模板代码直观。

<!-- UserCard.vue -->
<template>
  <div class="user-card">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps<{
  name: string;
  age: number;
}>();
</script>

2、使用 tsx 编写

在 tsx 中写同样的组件，代码结构会略有不同，因为模板和逻辑是统一在一起的：

// UserCard.tsx
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'UserCard',
  props: {
    name: String,
    age: Number,
  },
  setup(props) {
    return () => (
      <div class="user-card">
        <p>Name: {props.name}</p>
        <p>Age: {props.age}</p>
      </div>
    );
  },
});

2.2 复杂组件：带插槽和事件处理

插槽和事件处理是 Vue 中常见的功能，在 .vue 文件和 .tsx 文件中实现会略有不同。

1、使用 .vue 文件编写

<!-- Modal.vue -->
<template>
  <div v-if="visible" class="modal">
    <div class="modal-content">
      <slot></slot>
      <button @click="close">Close</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
const props = defineProps<{ visible: boolean }>();
const emit = defineEmits<{ (e: 'close'): void }>();
function close() {
  emit('close');
}
</script>
<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 1rem;
  margin: auto;
}
</style>

2、使用 .tsx 编写

tsx 中通过直接传递插槽内容来实现类似的功能。

// Modal.tsx
import { defineComponent, ref } from 'vue';
export default defineComponent({
  name: 'Modal',
  props: {
    visible: Boolean,
  },
  emits: ['close'],
  setup(props, { emit, slots }) {
    const close = () => emit('close');
    return () => (
      props.visible && (
        <div class="modal" style={{
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
          background: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center'
        }}>
          <div class="modal-content" style={{ background: 'white', padding: '1rem' }}>
            {slots.default && slots.default()}
            <button onClick={close}>Close</button>
          </div>
        </div>
      )
    );
  },
});

展示为：

2.3 使用组件

1、使用 .vue 文件

<template>
  <div>
    <UserCard name="Alice" :age="25" />
    <Modal :visible="isModalVisible" @close="toggleModal">
      <p>This is the modal content!</p>
    </Modal>
    <button @click="toggleModal">Toggle Modal</button>
  </div>
</template>
<script setup>
import UserCard from './components/UserCard.vue';
import Modal from './components/Modal.vue';
import { ref } from 'vue';
const isModalVisible = ref(false);
const toggleModal = () => (isModalVisible.value = !isModalVisible.value);
</script>

2、使用 .tsx 文件

import { defineComponent, ref } from 'vue';
import UserCard from './components/UserCard';
import Modal from './components/Modal';
export default defineComponent({
  name: 'App',
  setup() {
    const isModalVisible = ref(false);
    const toggleModal = () => (isModalVisible.value = !isModalVisible.value);
    return () => (
      <div>
        <UserCard name="Alice" age={25} />
        <Modal visible={isModalVisible.value} onClose={toggleModal}>
          <p>This is the modal content!</p>
        </Modal>
        <button onClick={toggleModal}>Toggle Modal</button>
      </div>
    );
  },
});

3、TSX 写法的优缺点

优点：

1、类型支持与代码提示：TSX 能够利用 TypeScript 的类型推断功能，减少开发中的类型错误。

2、灵活性与复用性：TSX 的写法更贴近 JavaScript 和函数式编程的范式，因此能更灵活地编写高阶组件和传递 props。许多复杂逻辑可以通过更纯粹的函数式写法实现。

3、易于集成第三方库：TSX 更符合主流 JavaScript 库（例如 React）的写法。

4、更好的代码组织：对于团队开发中的大型项目，TSX 组件更容易分离逻辑和样式管理，提升代码模块化水平。

缺点：

1、学习成本增加：TSX 更贴近 JavaScript 函数式写法，Vue 开发者需要理解 JSX 语法。

2、可读性降低：TSX 将模板、逻辑和样式混合在一个文件中，尽管提升了灵活性，但可读性不如传统的 .vue 文件结构。

4. 趋势与发展方向

对于复杂的企业级应用，TSX 的灵活性、类型安全性更符合需求。虽然 Vue 社区仍然以 .vue 文件为主流，但对于某些 TS 和 JS 深度开发者来说，TSX 正成为常见选择。Vue 团队未来可能会继续增强对 TSX 的支持，以适应不同的编程习惯。

到此这篇关于Vue 项目中选择 TSX 而非传统 .vue 文件的原因分析的文章就介绍到这了,更多相关vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3 编写自定义指令插件的示例代码
这篇文章主要介绍了Vue3 编写自定义指令插件的示例代码,主要包括编写自定义插件，在 main.ts 中加载启用插件的代码介绍，对Vue3自定义指令插件相关知识感兴趣的朋友一起看看吧
2022-07-07
详解Vue中生命周期钩子函数的使用示例
这篇文章主要为大家详细介绍了Vue中常见的生命周期钩子函数的使用,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2023-11-11
vuejs指令详解
本文介绍了vuejs指令的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
Vue中nprogress页面加载进度条的方法实现
这篇文章主要介绍了Vue中nprogress页面加载进度条的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
vue中的事件修饰符介绍和示例
在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理,需要的朋友可以参考下
2023-04-04
VUE3使用JSON编辑器方式
这篇文章主要介绍了VUE3使用JSON编辑器方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue利用vue-baidu-map实现获取经纬度和搜索地址
在开发项目的时候，发现需要获取经纬度，由于这个项目是用vue写的，最后决定使用vue-baidu-map来快速获取经纬度，感兴趣的可以了解一下
2022-09-09
Vue cli3 库模式搭建组件库并发布到 npm的流程
这篇文章主要介绍了Vue cli3 库模式搭建组件库并发布到 npm，以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程,需要的朋友可以参考下
2018-10-10
vue中scss语法的使用你了解吗
这篇文章主要为大家详细介绍了vue中scss语法的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
vue中对接Graphql接口的实现示例
本文主要介绍了vue中对接Graphql接口的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05