詳解在vue3中使用jsx的配置以及一些小問(wèn)題

更新時(shí)間：2022年03月11日 09:09:44 作者：shellingfordly

本文主要介紹了在vue3中使用jsx的配置以及一些小問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

配置

在vue3中使用jsx十分方便，只需要安裝官方的@vitejs/plugin-vue-jsx插件，在vite.config.ts中配置

// vite.config.ts
import vueJsx from "@vitejs/plugin-vue-jsx";

export default {
  plugins: [vueJsx()]
}

配置了vite.config.ts后雖然已經(jīng)可以使用jsx，頁(yè)面也正常渲染了，但是還是會(huì)提示無(wú)法使用jsx，此時(shí)還需要在tsconfig.ts中配置"jsx": "preserve"屬性，就可以愉快的使用jsx形式來(lái)寫(xiě)vue了。

// tsconfig.ts
{
  "jsx": "preserve",
}

模版語(yǔ)法

使用jsx時(shí)setup需要返回一個(gè)函數(shù)，函數(shù)返回jsx形式。不過(guò)使用jsx形式也有不好的地方，在使用數(shù)據(jù)就比較煩，不能像模版中一樣直接使用，需要加上.value，雖然新的volar插件已經(jīng)會(huì)自動(dòng)添加.value了，但還是很難受，一不小心就會(huì)忘記寫(xiě)。

<script lang="tsx">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const msg = ref("tsx component");
    return () => {
      return <div>{msg.value}</div>;
    };
  },
});
</script>

v-if/v-show

還有不太方便的一個(gè)點(diǎn)就是v-if無(wú)法使用，jsx中得使用三元表達(dá)式，但是三元感覺(jué)看起來(lái)不是很舒服

export default defineComponent({
  setup() {
    const msg = ref("tsx component");
    const isShow = ref(false);

    function onClick() {
      isShow.value = !isShow.value;
    }

    return () => {
      return (
        <div>
          <div>{msg.value}</div>
          {isShow.value && <div>{isShow.value ? "show" : "hide"}</div>}
          <el-button onClick={onClick}>onClick</el-button>
        </div>
      );
    };
  },
});

如果直接使用v-if就會(huì)報(bào)錯(cuò)無(wú)法讀取未定義的屬性

但是v-show是可以使用的，但v-if不行，不知道為什么，可能是直接jsx默認(rèn)推薦使用isShow && <div/>或者三元的形式吧

<div>
  <div>{msg.value}</div>
  {isShow.value && <div>{isShow.value ? "show" : "hide"}</div>}
  <div v-show={isShow.value}>{isShow.value ? "show" : "hide"}</div>
  <el-button onClick={onClick}>onClick</el-button>
</div>

v-show正確顯示出了show div，dom中也是通過(guò)display做的顯影，三元?jiǎng)t是創(chuàng)建和銷毀的dom

v-for就更不用想了，就用map吧，map也挺好用的，不過(guò)v-model還是可以使用的，顯示也正常

export default defineComponent({
  setup() {
    const msg = ref("tsx component");
    return () =&gt; {
      return (
        &lt;div&gt;
          &lt;div&gt;{msg.value}&lt;/div&gt;
          &lt;el-input v-model={msg.value} /&gt;
        &lt;/div&gt;
      );
    };
  },
});

到此這篇關(guān)于在vue3中使用jsx的配置以及一些小問(wèn)題的文章就介紹到這了,更多相關(guān)在vue3中使用jsx的配置以及一些小問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: