コンポーネント名は常に複数単語にする
HTML要素は1単語になっている
コンポーネント名を１単語で定義すると、知らなかったHTML要素の名前とかぶったり、将来追加される要素と衝突が起こる可能性がある
そのため、コンポーネント名を定義する際は以下のように複数単語のパスカルケースで設定する
Todo // ×
TodoList // 〇
propsにtypeを定義する
propsの名前から一目で型が分かるようにすることは前提であるとして、意図していない方の変数を渡された場合に警告を投げるようにすることができる
defineProps({
name: {
type: String, // TypeScriptのstringではないことに注意
},
});
StringのほかにもArray、Number、Object、Booleanなどがある
propsにでデフォルト値を設定する
たとえコンポーネントに値が渡されていない場合でもとりあえず使えるようにしておくためにデフォルト値を設定したいとき
デフォルト値の設定には以下の方法がある
チーム間でどちらを使うのか決めておくとよいだろう
-
withDefaultを使う
withDeaults(defineProps(), {
name: "名無し" // デフォルト値
})
-
definePropsのdefaultを使う
defineProps({
name: {
type: String,
default: "名無し" // デフォルト値
}
})
// 同じ構文でdefineModelでもデフォルト値が設定できる
watchでイベントリスナーを管理する
イベントリスナーの設定・破棄によく使われるonMountedとonUnmountedをwatchで代用することができる
処理が1つのスコープに収まるので管理しやすくなる
/**
element: ref（監視対象）
el: 新しい値
_: 古い値（ここでは使用しないためアンダースコア）
onCleanup: watchから渡される、監視対象が更新・破棄された場合の処理を記述できる関数
listener: イベント発火時の処理
*/
watch(element, (el, _, onCleanup) => {
// 要素が存在する場合にイベント設定
el && el.addEventListener("click", listener)
// onUnmountedをonCleanupで代用
onCleanup(() => el && el.removeEventListener(name, listener))
})
computedでHTML属性を動的に変更する
HTML要素の属性を動的に変更する際よく使われるのが、refで真偽値を持ち、タグ内で三項演算子を用いて状態毎に属性を付けたり外したりするもの
処理が使われている場所と処理自身の所在が同じになるという利点があるが、複雑になったり、長い変数名を使ったりするとコードの見通しが悪くなる
そんな時にcomputedを用いることで処理の見通しを良くし、かつタグ内のコード量を減らすことができる
<div :class="{
invalid: !isValid,
valid: isValid,
error: isError
}">
const myComputedClasses = computed(() => {
return {
invalid: !isValid.value,
valid: isValid.value,
error: isError.value
}
})
defineAsyncComponentでJSバンドルを減らして高速化する
使うときは使うがいつも必要ではないコンポーネントがよく出てくる
にもかかわらず、なにもしないとVueは使わないコンポーネントまでも一緒にバンドルされてしまう
defineAsyncComponentを使うと、初期状態では呼び出さないが、必要になったらロードするコンポーネントを指定できる
// コード上部にimport文は書かなくていい
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))