Vue 3 Official Docs 輪読会 #1 開催概要
タイムテーブル
- 10:00 イベント開始。挨拶・自己紹介
- 10:10 午前の部 輪読開始
- 12:00 ランチ休憩
- 13:00 午後の部 輪読開始
- 15:00 終了
自己紹介
Andy
仕事はVue, Go, k8s, Terraform, Open Stackあたり
mascii (ますきー)
業務で Vue 2.6 や @vue/composition-api プラグインを使っています
Vue 2, Vue 3 間の互換性や provide/inject の活用などに興味があります
syumai
趣味でDenoと言うTypeScript Runtime用のライブラリ等を作っています
仕事ではGoでmicroserviceを開発しています
前職でVue / React / React Nativeをやっていました。副業でちょっとNuxtやってる
nozomu.ikuta
仕事は、Vue中心に、Nuxt、Web Componentsだったりもやります
インフラの部署なので、k8s, OpenStackをバックエンドにしてアプリ開発してます
森 陽香
10月からエンジニアに転職します。
kahirokunn
仕事は最近はフロントエンドが多いです
Vue3のjsxの変換は自由だったけど、どう変換するのか規定されないと型の資産を発展させられない
ryo511( Ryo Utsunomiya )
前職では Nuxt.js + Go でWebサービスを作ってました
6月に転職して、直近では Vue + Spring Boot のプロジェクトで仕事してます
進捗
DevToolsのElectron版もある
@vue/cli@next でVue 3アプリが作成可能に
runtime build使いましょう
new Vue()から createApp()になった
Global configの概念は廃止されて、各Instanceに対してinteractしていくイメージ
dataの返り値は参照渡しでもreactiveになる
変えたくない場合は Object.freeze
emits対象イベントを明示的を指定するよう変更。validatorも書ける
keycodes周りのdeprecate
v-modelを複数指定できるように
sugar syntaxで隠されたdefault valueが modelValueに、emit eventが update:modelValueに変更
Dynamic Componentの :is指定が <component/>に対してしか行えなくなった。ネイティブコンポーネントには v-isを使う(web componentsの仕様と競合するため)
Global空間ではなく個別のAppplication Instanceにregisterするように変更
v-modelにcustom modifiersが指定できるようになった
child componentでv-modelでbindされたpropに対するmodifierを扱うには「prop名 + Modifers」という名前のpropを設定する ← キモい
v-model:foo.capitalizeが親コンポーネントが設定されたとき、child component内での this.fooModifiersの中身は { capitalize: true }となる ← とてもキモい
named slotにVNodeをassignする際は、tagに v-slot:hogeを指定。 #hogeも可能
scoped slotは #hoge="slotProps"で指定。 #hoge="{ item }"でも受けられる
Reactのcontext APIのようなやつ
親の provideで指定された値を子孫は任意に inject: ComponentInjectOptionsで取り出せる
code:ts
declare type ComponentInjectOptions = string[] | Record<string | symbol, string | symbol | {
from: string | symbol;
default?: unknown;
}>;
provideの値はdefaultではreactiveではないので、必要に応じて computedなどでref化してあげる
provideされたvalue名がconflictする際は、injectするコンポーネンとから見て一番近い親の値が参照される
child componentのregister時にdynamic import文を defineAsyncComponentでラップしてあげることで、timeout, error handler, suspense, retry count等の設定できる ← 便利
Enter/Leaveのclass名が少し変わった。
Composition APIを推奨
Hook FunctionsがVue componentのlifecycle準拠になった ← ようやく
directiveの指定時にargumentも渡せる
VNode Treeの順番に関わらず、任意のDOMにappend childできる機能
Modal等の実装で役立つ
toで指定したセレクタにヒットするDOMが複数存在する場合は、先頭のものが対象。selector実装はruntimeによって異なるが、 runtime-domでは document.querySelectorが利用されている
vue packageが hをexportするように
hのoptionsが若干変更。
Vue.prototypeに拡張methodを生やすのではなく、 app.config.globalProperties.$hogeでregisterする方式に変更
深い実装の話になりそうなので、今回はスキップ
beter poratbility + better code organization
lifecycle methodも何度でも呼べる
refでwrapされたvalueは、refとしてtemplateに渡しても自動でvalueだけ引き剥がされた状態でruntimeに載る
computedはreadonlyなrefを返す