jsx后缀的是什么文件_是 jsv 而不是 jsx：这可能是你更想要的魔改vue3代码编写方式...

vue官方推荐的是单文件 .vue编写组件，简单易学但没有jsx灵活，很多知名的UI库最终选择了使用jsx，例如：ant-desing-vue, vant。但是在 vue 中使用 jsx 也存在一些问题。比如：大部分 vue 指令无法使用或者很难使用。在 vue3 中专门开了个 issue 讨论，但至今没有优雅的解决方案。 jsv而不是 jsx可能是更好的解决方案。

一、先看看 .vue 与 .jsx 的比较

1. 变量作用域比较

• 1.1 .vue中无法使用当前作用域变量，必须return后才能使用

// Scope.vue<template>    <div>{
    { state.count }}div>    <button @click="handleClick">点击加1button>template><script>import { reactive } from "vue";export default {
        setup() {
            let state = reactive({ count: 0 });        function handleClick() {
                state.count++;        }        // 在模板中无法直接使用setup中的变量，必须return        return { state, handleClick };    },};script>

• 1.2 .jsx中可以直接使用当前作用域的变量

// Scope.jsximport { reactive } from "vue";export default {
        setup() {
            let state = reactive({             count: 0         });        function handleClick() {
                state.count++;        }                // 可以在渲染函数中直接使用当前作用域的变量        return ()=>(            <div>                <div >{ state.count }div>                <button onClick={handleClick}>点击加1button>            div>            )    },};

2. 灵活性比较

• 2.1 .vue中一个文件只能写一个组件

// NoMulti.vue<template>    <Title :title="state.title" />template><script>import { reactive } from "vue";// 不能在一个.vue中写多个组件，必须将 Title 写在另外一个文件中import Title from "./Title.vue";export default {
        components: { Title },    setup() {
            let state = reactive({ title: "jsv-compiler" });        return { state };    },};script>

// Title.vue<template>  <h1>hello {
    {title}}h1>template><script>export default {
      props: {
        title: String  }}script>

<