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

ちなみに糖衣構文とは、プログラミング言語において、読み書きのしやすさのために導入される書き方とのことらしい。 Vue３のシンタックスシュガー Viteで環境構築するとデフォルトで下記のような糖衣構文が使われている。 どうやらVue3.2から使用できるようになったとのこと。 こちらを使えばreact Likeな書き方ができるっぽいので調べてみた。 まずVeturを無効に まずvsCodeの拡張機能の話から入り申し訳ないが、Veturは糖衣構文に対応していないとのこと。 なのでVolarを使う必要がある。 これは公式もアナウンスしている。 setup関数がいらない この構文を使えばsetup関数をわざわざ書く必要がない。 をする必要もなければ、 をする必要もないので、とんでもなくシンプルに書けるようになった。 というより、よりjavascriptに戻ってきた感がある。 Propsを使いたい Propsはscript内で、 で使用できるようになる。 デフォルト値を定義するには、 上記のように。 emitを使いたい 上記のように使えばできる。 ライフサイクルはどうなったの？ 従来通りに使い方で問題ない。 この記事はhttps://zenn.dev/watataku/articles/271d00d844c554の自分用メモなので、詳しくはhttps://zenn.dev/watataku/articles/271d00d844c554を参照してください。