Vue 项目中选择 TSX 而非传统 .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>

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

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

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

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

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>
    );
  },
});