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

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

Vue３のシンタックスシュガー

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: "uppublished:value", value: string): void;
}


defineEmits<Emits>();


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

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

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

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

この記事はhttps://zenn.dev/watataku/articles/271d00d844c554の自分用メモなので、詳しくはhttps://zenn.dev/watataku/articles/271d00d844c554を参照してください。

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