Vue 3 Official Docs 輪読会 #1
開催概要
タイムテーブル
- 10:00 イベント開始。挨拶・自己紹介
- 10:10 午前の部 輪読開始
- 12:00 ランチ休憩
- 13:00 午後の部 輪読開始
- 15:00 終了
自己紹介
Andy
https://twitter.com/andoshin11
https://blog.andoshin11.me/
仕事はVue, Go, k8s, Terraform, Open Stackあたり
Vue 3でTemplateの型チェックがどうなるか気になってる(https://blog.andoshin11.me/posts/type-checking-vue-template)
mascii (ますきー)
https://twitter.com/mascii_k
https://qiita.com/mascii
業務で Vue 2.6 や @vue/composition-api プラグインを使っています
Vue 2, Vue 3 間の互換性や provide/inject の活用などに興味があります
syumai
https://twitter.com/__syumai
https://github.com/syumai
趣味でDenoと言うTypeScript Runtime用のライブラリ等を作っています
仕事ではGoでmicroserviceを開発しています
前職でVue / React / React Nativeをやっていました。副業でちょっとNuxtやってる
nozomu.ikuta
https://twitter.com/NozomuIkuta
仕事は、Vue中心に、Nuxt、Web Componentsだったりもやります
インフラの部署なので、k8s, OpenStackをバックエンドにしてアプリ開発してます
森 陽香
https://twitter.com/hinokichi77
10月からエンジニアに転職します。
kahirokunn
https://twitter.com/kahirokunn
仕事は最近はフロントエンドが多いです
Vue3のjsxの変換は自由だったけど、どう変換するのか規定されないと型の資産を発展させられない
ryo511( Ryo Utsunomiya )
https://twitter.com/ryo511
前職では Nuxt.js + Go でWebサービスを作ってました
6月に転職して、直近では Vue + Spring Boot のプロジェクトで仕事してます
進捗
Installlation
DevToolsのElectron版もある
@vue/cli@next でVue 3アプリが作成可能に
Vite(/vit/)はcreate-vite-appを使うのがスタンダード
runtime build使いましょう
Introduction
new Vue()から createApp()になった
Global configの概念は廃止されて、各Instanceに対してinteractしていくイメージ
The Application Instance
dataの返り値は参照渡しでもreactiveになる
変えたくない場合は Object.freeze
Template Syntax
Computed Properties and Watchers
Class and Style Bindings
Conditional Rendering
List Rendering
https://github.com/vuejs/vue-next/blob/e4dc03a8b17d5e9f167de6a62a645878ac7ef3e2/packages/runtime-core/src/helpers/renderList.ts#L62
Event Handling
emits対象イベントを明示的を指定するよう変更。validatorも書ける
keycodes周りのdeprecate
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0014-drop-keycode-support.md
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
Form Input Bindings
v-modelを複数指定できるように
Components Basics
sugar syntaxで隠されたdefault valueが modelValueに、emit eventが update:modelValueに変更
Dynamic Componentの :is指定が <component/>に対してしか行えなくなった。ネイティブコンポーネントには v-isを使う(web componentsの仕様と競合するため)
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0027-custom-elements-interop.md
Component Registration
Global空間ではなく個別のAppplication Instanceにregisterするように変更
Props
Non-Prop Attribute
Custom Events
v-modelにcustom modifiersが指定できるようになった
child componentでv-modelでbindされたpropに対するmodifierを扱うには「prop名 + Modifers」という名前のpropを設定する ← キモい
v-model:foo.capitalizeが親コンポーネントが設定されたとき、child component内での this.fooModifiersの中身は { capitalize: true }となる ← とてもキモい
Slots
named slotにVNodeをassignする際は、tagに v-slot:hogeを指定。 #hogeも可能
scoped slotは #hoge="slotProps"で指定。 #hoge="{ item }"でも受けられる
Provide / Inject
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するコンポーネンとから見て一番近い親の値が参照される
Dynamic & Async Components
child componentのregister時にdynamic import文を defineAsyncComponentでラップしてあげることで、timeout, error handler, suspense, retry count等の設定できる ← 便利
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0026-async-component-api.md
Template refs
Handling Edge Cases
Transision / Animation
Enter/Leaveのclass名が少し変わった。
Mixins
Composition APIを推奨
Custom Directives
Hook FunctionsがVue componentのlifecycle準拠になった ← ようやく
directiveの指定時にargumentも渡せる
Teleport
VNode Treeの順番に関わらず、任意のDOMにappend childできる機能
Modal等の実装で役立つ
toで指定したセレクタにヒットするDOMが複数存在する場合は、先頭のものが対象。selector実装はruntimeによって異なるが、 runtime-domでは document.querySelectorが利用されている
https://uit-inside.linecorp.com/episode/51
https://ja.reactjs.org/docs/portals.html
Render Functions
vue packageが hをexportするように
hのoptionsが若干変更。
https://vue-next-template-explorer.netlify.app/#{"src"%3A"<div>Hello%20World!<%2Fdiv>"%2C"options"%3A{"mode"%3A"module"%2C"prefixIdentifiers"%3Afalse%2C"optimizeImports"%3Afalse%2C"hoistStatic"%3Afalse%2C"cacheHandlers"%3Afalse%2C"scopeId"%3Anull%2C"ssrCssVars"%3A"{%20color%20}"%2C"bindingMetadata"%3A{"TestComponent"%3A"setup"%2C"foo"%3A"setup"%2C"bar"%3A"props"}}}
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md
Plugins
Vue.prototypeに拡張methodを生やすのではなく、 app.config.globalProperties.$hogeでregisterする方式に変更
Reactivity in Depth
深い実装の話になりそうなので、今回はスキップ
Composition API: Introduction
beter poratbility + better code organization
https://vue-composition-api-rfc.netlify.app/#code-organization
lifecycle methodも何度でも呼べる
refでwrapされたvalueは、refとしてtemplateに渡しても自動でvalueだけ引き剥がされた状態でruntimeに載る
computedはreadonlyなrefを返す