Vue.js v-tokyo Meetup #21 https://gyazo.com/436d13558e6e95eb9a5c77997201cd6f
Lifetime annotation
https://gyazo.com/c3fb3e76cc044a62d13c71820d66a47a https://github.com/oxc-project/bench-javascript-parser-written-in-rust
なぜ高速なのか
未来について
最適な選択を取り込む
無駄がない思想
Vue2にも対応
Composition関数
一例の紹介
useMouse
オプションを渡すだけでリアルタイムのマウス座標を取得できる
イベントリスナーを使用して座標を追跡できる
ライフサイクル管理
useClipboard
コピーができた状態などのリアクティブな状態管理が可能 書き込みもカンタン
カスタマイズが柔軟
useAxios
自動的なリクエスト状態管理
リアクティブなクエリパラメータ
リクエストメソッド、ヘッダー、手動トリガー
create-babeylon-app
使用したパッケージ
コンソールログの装飾
ディレクトリやファイルパスを指定してpackage.jsonやtsconfigを読み書きできる
ビルドツール
FeaSion
Analytics
Tracking
Adsense
Marketing
Support
Payments
新規の追加リクエストも随時募集中
移行方法
移行しやすい方法への提供
compatibilityVersionを設定して有効化できる
問題があったら変更をOFFにできる
移行する場合はこれを活用する
変更点
デフォルトがappに変わる
なぜ変更されたのか
FS watcherのパフォーマンス悪化の可能性
IDE type safety
serverとそれ以外では別々のコンテキストの auto importになっている
移行は必須ではなくこれまでと同じsrcで利用できる
useFecthやuseAsyncDataのdataを異なるページ感で共有できる
同じkeyでキャッシュされたデータを扱える
パフォーマンス向上
マイグレーション時の注意
動的なページを使っていてkeyを設定しない場合
どのページでも同じデータが共有されてしまう
ユニークなkeyを設定しましょう
useAsyncDataとuseFetchのデフォルト値が変わる
undefinedに変わる
目的
もともとはnullだった
useAsyncDataとuseFetchのrefreshメソッドでdedupeオプションにbooleanを使えない
目的
cancelとdeferに明示的にしてわかりやすくした
フラグでOFFにはできない
useAsyncDataとuseFetchのdefaultオプションの尊重
いままではclearNuxtDataを使うとデフォルト値ではなくundefinedになっていた
目的
dataはimmputableであるべきだと考える
注意点
これまでの挙動にしたいならdeep: trueに設定する
tsconfig.jsonのnoUncheckedIndexedAccessが有効になる
配列のアクセスやオブジェクトのプロパティのアクセスをより厳密化する
目的
window.__NUXT__の削除
window.userNuxtAppを使うようにする
builder:watchが絶対パスで返す
目的：srcDirの外も監視可能にするため
middlewareの小ディレクトリのindexがスキャンできる
目的：pluginsに揃えるため
templateのcompile方法が変更された
getContentsに移行された
目的：lodash/templateを使っていたがセキュリティ問題があった