Vue.js
https://scrapbox.io/files/6703ecbe4f5196001c5333e5.png
emit
コールシグネチャで型リテラルとして記述される、呼び出し可能な関数型。
これは、返される emit 関数の型として使用されます。
キーがイベント名で、値が追加で受け付けるイベントのパラメーターを表す配列/タプル型である型リテラル。
上記の例では、名前付きタプルを使用しているため、各引数は明示的な名前を持つことができます。
v-model
カレンダー
type="date" の input の場合、value 属性には YYYY-MM-DD フォーマット文字列しか取れない
code:vue
<script setup>
import { ref } from "vue";
const birthdate = ref(new Date(1996, 1, 22).toISOString().split("T")0); </script>
<template>
<p>{{ birthdate }}</p>
<label for="birthdate">Birth Date: </label>
<input v-model="birthdate" type="date" id="birthdate" />
</template>
コンポーザブル とは、Vue の Composition API を活用して再利用可能な状態やロジックを定義するための機能です。
コンポーザブル とは、Vue の Composition API を活用して再利用可能な状態やロジックを定義するための機能です。Options API で主流な mixins と類似したコンセプトですが、より柔軟で再利用性の高い機能を提供します。
再利用可能なロジック
コンポーネント間でロジック、状態を共有
関数として定義
必要な状態やメソッドを返す関数
Vue の Composition API を使用して内部で状態管理や副作用を処理
明示的な依存関係
どのロジックや状態がどのコンポーネントで使用されているかが明確に
UI の理想的な(仮想的な)メモリー内に保持し、実際の DOM と同期させる
Vue を含む多くのフレームワークで異なる実装で採用されている
code:ts
const vnode = {
type: 'div',
props: {
id: 'hello',
},
children: [
/* more vnodes */
],
};
vnode は <div> 要素を表現する JavaScript オブジェクト
実際の要素を表現する(作成する)のに必要な情報を全て含んでいる
子ノードを含んでおり、仮想 DOM ツリーのルート(root)となる
ランタイムのレンダラーは仮想 DOM ツリー内を走査して、実際の DOM ツリーを構築する
これをマウントという
仮想 DOM のツリーのコピーが 2 つある場合、レンダラーは 2 つのツリーを走査して比較
違いを把握して、その違いを実際の DOM に適用することができる
これをパッチという(diffing, reconciliation)
仮想 DOM の利点
DOM の直接的な操作はレンダラーにおまかせ
開発者は宣言的な方法で希望する UI 構造さえ気にすればよい
render()
createApp() のオプションが言う render は「仮想 DOM の生成」を指す
コンポーネントのインターフェース
必要になったステートを考えなしにコンポーネントに生やしてはいけない
具体的に「props/emit」のこと
どういう props/emit を持つべきかを考える
これが決まればそのコンポーネントの振る舞いが決まる
「誰」が「どの」ステートを持ち、「誰」が「どう」更新するべきかを考える必要がある
props/emit, state の所在が決まればコンポーネントの設計はほぼ全て終わり
あとは、それぞれのコンポーネントがそのインターフェースに沿った振る舞いができるように詳細を実装していけばよい
とにかくコンポーネントのインターフェースを中心に実装を進める