先日、Remote.vue #2 に参加しました。オンライン開催。簡単に所感をまとめます。
所感
ユーザーに提供する知識、情報、振る舞いは、いわゆる情報設計?というものかと思いますが、これをコンポーネント分割の観点にするというのは目から鱗でした。なるほど。
Composition API はあまり理解できてないのですが、Ref と Reactive の違いや reactive のハマりどころが知れてよかったです。その他のリアクティブ関係の関数がスライドの最後の方に記載されていましたが、なかなかおもしろそう。特に readonly とか customRef とか markRaw とか。
YouTube の URL はこちら。
https://youtu.be/hUcQXgUxQVcyoutu.be
以下、メモから抜粋。
SFCで挑戦するFunctional Component
- Functional Component
- Functional Component であることを明示してパフォーマンス向上☆
- ライフサイクルメソッドがないから☆
<template functional>
orfunctional: true
- Vue 3 からはこの書き方はサポートされない?
- ⇒ h関数 or JSX
- props がない
- this (コンテキスト) がない (
props
キーワードでアクセス)
- this (コンテキスト) がない (
- methods は
$options
にある - その他、通常コンポーネントと振る舞いが違うところがある☆
- 状態を持つコンポーネントをたくさんレンダリングすることはあるか?
- リストなど, ...
Fat Component にならないためのフロントエンド + オブジェクト指向 on Vue.js
- https://github.com/tooppoo/sample-for-vue-with-design-patterns
- コンポーネント分割?
- template や style に対しては効果的
- script には限界がある
- UIやレイアウトではなく情報設計に注目する☆
- ユーザーに提供する知識、情報、振る舞い
- データ, CRUD操作と一致するとは限らない
- View - Interaction - Model
- View では HTML とオブジェクトのプロパティ/操作とのマッピングのみ記述する
- 複雑な処理や計算はコンポーネントから切り出す☆
- Atomic Design はUIデザインの構造化の手法
- 内部の振る舞いについては言及されていない
- pages コンポーネントにロジックが集まりがち
- methods はイベントハンドラに留める
- ロジックは他ファイルに切り出して import する
Ref vs Reactive 〜Vue Composition API リアクティブ関数の探究〜
- Composition API
- 責務ごとにデータとロジックをまとめて書ける
- ref
- プリミティブな値を ref オブジェクトでラップしてリアクティブに
- reactive
- プリミティブでない値を Proxy オブジェクトでラップしてリアクティブに
- プリミティブな値を渡すとエラー
- Proxy は IE11 ではサポート外
- ref と reactive を使い分ける☆
- プリミティブ値は ref, オブジェクトは reactive
- 可能な限り reactive を使う☆
- Vue 2 系の data のような扱い
- コンポーネントごとに単一の state として持たせたり
- ref は内部で reactive を呼ぶ
- プリミティブでない値は reactive が呼ばれる
- template Ref
- computed の戻り値は readonly な ref
- reactive の消失☆
- 外部ファイルで reactive なオブジェクトを返す
- 使う側で返り値を分割代入するとただのプリミティブな値になる
- ⇒ toRefs 関数で第一階層だけ ref にラップしてくれる
- props を分割代入するときも注意
- reactive な値を渡すときも注意 ⇒ toRef を使う
- その他、リアクティブ関係の関数☆
- オブジェクトにして reactive に寄せる
- ⇒ あとでプロパティが増えたときに吸収しやすそう☆