vue3のシンタックスシュガーについて調べてみた。

Vue3の糖衣構文について調べてみた。

目次

ちなみに糖衣構文とは、プログラミング言語において、読み書きのしやすさのために導入される書き方とのことらしい。

Vue3のシンタックスシュガー

Viteで環境構築するとデフォルトで下記のような糖衣構文が使われている。

<script setup lang="ts">

どうやらVue3.2から使用できるようになったとのこと。

こちらを使えばreact Likeな書き方ができるっぽいので調べてみた。

まずVeturを無効に

まずvsCodeの拡張機能の話から入り申し訳ないが、Veturは糖衣構文に対応していないとのこと。

なのでVolarを使う必要がある。

これは公式もアナウンスしている。

setup関数がいらない

この構文を使えばsetup関数をわざわざ書く必要がない。

export default defineComponent({})

をする必要もなければ、

return {}

をする必要もないので、とんでもなくシンプルに書けるようになった。

というより、よりjavascriptに戻ってきた感がある。

Propsを使いたい

Propsはscript内で、

defineProps<Props>();

で使用できるようになる。

デフォルト値を定義するには、

withDefaults(defineProps<Props>(), {
  propsVal: "",
});

上記のように。

emitを使いたい

<script setup lang="ts">
type Emits {
  (e: "input", value: string): void;
  (e: "update:value", value: string): void;
}


defineEmits<Emits>();


const handleInput = ({ target }: { target: HTMLInputElement }) => {
  emit("input", target.value);
  emit("update:value", target.value);
};
</script>

上記のように使えばできる。

ライフサイクルはどうなったの?

従来通りに使い方で問題ない。

この記事は`<script setup>`構文で書くVue.jsの自分用メモなので、詳しくは`<script setup>`構文で書くVue.jsを参照してください。

次に読むおすすめ記事

Vue3のベースプロジェクトを作成したので、仕上げにhuskyを導入する

Vue3のベースプロジェクトのコードを統一する

毎回調べるのが面倒なのでVueのベースプロジェクトを作成する

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です