Open5ヶ月前にコメント追加19

Vue公式ドキュメント全部読む

はじめに

createApp関数って何やってるんだっけ？DOMに対してどういう働きをしている？
setupって何だっけ
- Vue にコンパイル時の変形操作を実行してほしいというヒントが伝えられるらしい
- それによってこちらでおまじないをしなくてよくなったのか？
ビルドステップ無しで静的なHTMLを拡充？

クイックスタート

CDNで使う場合はビルドステップ要らないんだ
- あーSFCが使えないからか
グローバルビルドとは？
- ESモジュールビルドと対になる概念
- あんま使わない
インポートマップとは？
- 各ファイルでモジュールのフルパスを指定する代わりに短い識別子で読み込むことができる機能
petite-vueとは？
- 軽量なVue
- 機能も制限されている

Vue アプリケーションの作成

createApp に渡しているオブジェクトは、実際にはコンポーネント
コンテナ要素=#app
- アプリの要素としてはみなされない
複数インスタンスのユースケースがわからない

テンプレート構文

ディレクティブの本質は、レンダリングされる DOM に、特別なリアクティブな振る舞いを割り当てること
v-bindの動的引数初めて知った

リアクティビティーの基礎

shallowRefはネストされたオブジェクトに対してのリアクティビティーを放棄する
- 大きなオブジェクトへの監視コストを下げてパフォーマンスを最適化できる
- トレードオフとしてネストされたオブジェクトはイミュータブルに保つようにしなければならない
- 更新はルートの状態を置き換えることによってのみトリガされる
nextTick
- まず、リアクティブな値を変更してもDOMへの反映は同期的ではないことが前提
- 非同期キューに追加されたのちに一括でDOMが更新される
- DOMが更新されたあとにnextTickに渡されたコールバック関数が実行される
- 強制的にDOMの更新を発生させるためのAPIだと勘違いしていた

算出プロパティ

副作用を起こしたいときはwatchを使うという観点

クラスとスタイルのバインディング

OK

条件付きレンダリング

OK

リストレンダリング

リストレンダリングにおいて、keyがある場合とない場合でそもそもDOM更新のアルゴリズムが違う
リストレンダリングにおいて、算出プロパティのメリットは配列の元のデータを実際に変更することやリセットすることなしに、フィルタリングや並べ替えを適用したバージョンを表示できる点にある

イベントハンドリング

fooはメソッドハンドラー、foo()はインラインハンドラーとして扱われる
キー修飾子、マウスボタン修飾子がある

フォーム入力バインディング

v-model特有の属性、true-valueとfalse-valueの使い道がわからない
使わなくても実装できるロジックをより複雑にしているように見える

ライフサイクルフック

ライフサイクルフックAPIの呼び出しは同期的でなければならない
外部関数に切り出して呼び出すことは可能
つまり、重要なのはコールスタックが同期してい状態でsetup()内から発生していること

ウォッチャー

リアクティブなオブジェクトのプロパティを監視するためにはgetterにする
watchEffectは常に即時実行される

テンプレート参照

参照にアクセスできるのはコンポーネントがマウントされた後に限られるためnullを考慮する

コンポーネントの基礎

<component :is="x"> の使い所
- Playground
- タブUIなどコンポーネントを動的に切り替えたいときなど
  - component 要素を KeepAlive コンポーネントで囲めば状態をメモリにキャッシュできる
  - タブを切り替えてもコンポーネントがアンマウントされずに、非アクティブ化状態に移行する
  - onActivated と onDeactivated で監視可能
- v-if を使って制御すると、テンプレートにロジックが肥大化しがちだが、その問題を解消できる
DOM内テンプレートとは
- HTMLファイルにVueの世界を展開すること
- https://teratail.com/questions/243363

コンポーネントの登録

グローバル登録
- ツリーシェイクされない
コンポーネント名はPascalCaseで書く
- JavaScriptの識別子として有効
  - インポートしたり登録したりが容易になる
- ネイティブのHTML要素との区別が明確になる
Nuxt3における /components はglobal登録なのか？
- 違う、local登録
- Alternatively, though not recommended, you can register all your components globally,
- https://nuxt.com/docs/guide/directory-structure/components#dynamic-components
- nuxt.config.ts の components.global のデフォルト値も false となっている

props

技術的には、子コンポーネントに props を渡すときにも camelCase を用いることができるらしい
defineProps() の引数の中のコードは、コンパイル時に式全体が外側の関数スコープに移されるため、<script setup> 内で宣言している他の変数にアクセスできない

コンポーネントのイベント

ネイティブの DOM イベントとは異なり、コンポーネントから発行されたイベントはバブリングしない
直接の子コンポーネントから発行されたイベントのみを購読できる
- 普段emitsのバケツリレーで実装しているがあんまりよくなさそう
@click.once
- 二回以上クリックしても、最初の一度しかハンドラーが呼ばれないようにできる
$emitとdefineEmits
- $emitではスクリプトで書けないのでdefineEmitsを利用する
ネイティブイベント（例: click）が emits オプションに定義されている場合、リスナーはコンポーネントが発行する click イベントのみを購読し、ネイティブの click イベントには反応しなくなります。
- ？
defineEmitsでは型チェックの他にバリデーション関数を定義できる

コンポーネントの v-model

defineModelはdefinePropsとdefineEmitsを使った書き方にコンパイルされる
defineModelにてデフォルト値を与えられたpropsに対してundefindを渡したら、うまく動作しなくなる
v-model修飾子は自作できる
- get、setを使って実装する