Remote.vue #2 に行ってきた #remote_vue

Vue.js メモ

先日、Remote.vue #2 に参加しました。オンライン開催。簡単に所感をまとめます。

lapras.connpass.com

所感

ユーザーに提供する知識、情報、振る舞いは、いわゆる情報設計？というものかと思いますが、これをコンポーネント分割の観点にするというのは目から鱗でした。なるほど。

Composition API はあまり理解できてないのですが、Ref と Reactive の違いや reactive のハマりどころが知れてよかったです。その他のリアクティブ関係の関数がスライドの最後の方に記載されていましたが、なかなかおもしろそう。特に readonly とか customRef とか markRaw とか。

YouTube の URL はこちら。

https://youtu.be/hUcQXgUxQVcyoutu.be

以下、メモから抜粋。

SFCで挑戦するFunctional Component

  • Functional Component
  • Functional Component であることを明示してパフォーマンス向上☆
    • ライフサイクルメソッドがないから☆
    • <template functional> or functional: true
      • Vue 3 からはこの書き方はサポートされない？
      • ⇒ h関数 or JSX
  • props がない
    • this (コンテキスト) がない (props キーワードでアクセス)
  • methods は $options にある
  • その他、通常コンポーネントと振る舞いが違うところがある☆
  • 状態を持つコンポーネントをたくさんレンダリングすることはあるか？
    • リストなど, ...

Fat Component にならないためのフロントエンド + オブジェクト指向 on Vue.js

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 に寄せる
    • ⇒ あとでプロパティが増えたときに吸収しやすそう☆