VueConf 2019

　元々 Vue Fes Japan2019 の内容を書く予定でしたが、開催は台風が原因で中止されたため、たまたま中国語読める僕がVueConf ShanHaiでのVue3.0 の中国情報を皆さんに共有する方針に変更しました。

動画のリンクはこちらです ↓ https://node.fequan.com/playvideo/701606bc91ece45fc7650b5ac92653ae_7 因みにこちらの動画は2019年6月8日の中国上海交通大学で開催されたVueConf内容です。 会場の様子↓

Evanさんが筆頭にいて、他の登壇者は、バイドゥやアリババなど中国企業のフロントエンジニアでした。 登壇者一覧はこちらです↓。 https://vue.w3ctech.com/

--- #### 現状利用状況 - Chrome DevTools: 週~９０万アクティブユーザーがいます. 比べて　 React は~160 万 - NPM のダウンロード数: ~400 万回/月 - Jsdelivr CDN: ~５億回の利用/月 - GitHub stars: １４万 GitHub 上では第３位ですが、実際のプロジェクト数は１位です。

--- - 世界各国で VueConf が行われています。

--- - - State of JavaScript2018 の調査でフロントフレームワーク満足度１位 - StackOverFlow 2019 年度調査 で MostLoved Web Frameworks ２位 Evan さん曰く満足度調査良い結果出せたので、マイナス的な評価は気にしていません。

--- - Vue のコア開発メンバーは世界各地から集まった２０人で、みんな普段の業務で Vue と関わっています。（普段メンバーは Discord でコミュニケーションしてる） - Vue は独自で運営していて、資金は主にスポンサーからきています。３年間増加し続けています。

• @sodatea さんがフルタイムで CLI & ツールチェーンを行なっています。

３.０の目標を振り返ってみる。

- もっと小さく - もっと早く - TypeScript のサポートを強化 TS の強化は重要なタスクの一つである - API の設計統一性の強化 細かい部分での統一性のない仕様をなくす - 自身の冗長性の強化 - もっと低いレイヤーの機能の解放

3.0 の核心目標は「もっと早く」と「TS のサポート」である。

どうやって「もっと早く」を実現しているか

- Object.defineProperty -> Proxy - Virtual DOM 　再構築 - コンパイル時の最適化

Object.defineProperty から Proxy に変更したにしたことによって、初期化の性能がよくなりました。 他にVirtual DOM を再構築した、去年の発表で 3.0-proto が v2.5 より 1 倍も早くなったことを発表しましたが、まだ足りません。 それとみなさんが誤解を持っている、VirtualDOM は操作を高速するためのものではなく。、実は VirtualDOM は抽象層であり、本当の価値は表現力にあり、画面を JavaScript で表現するためのものでです。

表現力を高めた代償としては,毎回の更新で VirtualDOM のツリーが最初から作成され、新旧のツリーを一度比較する。Vue は更新する単位をコンポーネントとして最小化できたが、各コンポネート内の更新比較は繊細ではないため、コンポーネント内はテンプレートを万遍なくなめる必要があります。

例を見てみましょう、既存の vdom ではテンプレート更新する度に、右側の操作が行われます。上から下まで万遍なく diff でみています。 Evan さんはこの仕組みになった理由は JSX(ggr)が原因であると言っています。 直訳すると JSX が完全に動的であるため、最適化ための情報を保持することできいことが原因でした。

なぜ Virtual DOM やめないか - 複雑な構成にて、高い表現力実現できる。 - コードの生成がシンプル - 2.xと互換性がある

--- 改善策 - v-ifの外部はv-ifのみ動的node - v-ifの内部は{{message}}が動的node v-if追跡と中の{{message}}のみの追跡が十分です。

このように動的と静的部分をブロックで分割し、動的変化する部分のみ追跡しています。 この構成をネタで「Block tree」と呼んでいます。

--- Before と Afterの比較 動的箇所での数がポイントになっています。

複雑な画面（詳細条件省略）でベンチマークしたところ、約６倍の性能上昇が確認できました。

Vue3.0の新しいAPI --- ### なぜ Class APIを取り消した

- TSもっとよくサポートする目的でしたが、Propsなどのthisに代入する属性の型宣言が依然にトラブルがある。Decoratorsが不安定なため、リスクが高い。 - Class APIが型サポート以外になんのメリットもない、UIのコンポーネント作成時にオブジェクト指向や継承など使わないし、それと実はもっといい選択肢があります。。

Class APIの代わりに

Class APIと比べて

• TypeScriptの型推測サポート (Evanさんがいうには、JavaScriptのように書くだけで、型推測してくれて、型宣言しなくて良い。タイプフレンドリー)
• もっと柔軟なロジック再利用
• Tree-shakingに対してフレンドリー (パッケージ使わなければ、最後のimport,exportされない、全体サイズが小さくなる)
• コードもっと圧縮されやすい

現状のロジック再利用際の比較

Mixins の大量使用の場合

• ネームスペース衝突　 ❌
• テンプレートのデータの元が明白ではない　 ❌

Higher-order Components 大量使用の場合

(ロジックを一つの副コンポーネント内にまとめる)

• props 命名スペース衝突 ❌
• props の元が明白ではない　 ❌
• 余計なコンポーネント構築によって、性能の低下　 ❌

Renderless Components 　大量使用の場合

(v-slot を利用したロジックの結果を受け取り方法)

• 命名スペースの衝突がない　 ⭕️
• データの元が明白　 ️️️⭕️
• コンポーネントを媒体してるため、余計なコンポーネント構築による性能低下がある.　 ❌

※新しい API を利用すると上記 ↑ の問題全部回避できます。

このように新しい API 使ってロジックを全部関数にまとめて、data に関数を呼び出し、結果の変数名を再定義する。

• 命名スペースの衝突がない
• データの元が明白
• コンポーネント ではないため、不必要な性能低下はなくなった。

感想： 　今回の VUE CONF SHANGHAI2019 で Vue3.0 が早くなった理由や新しい API のメリットの説明がメインでした。結構わからない細かい内容いっぱい出てきましたが、雰囲気の理解でしか伝えられなくて、申し訳ありません。（汗） 　今回の内容を見て、新しい API がすごく助かると感じています。僕結構 Higher-order Components でメインに書いてきたので、PPT に書いてたデメリット全部体感できました。そして他のやり方も「確かにそうなるよね」と感じています。Vue3.0 がますます使いやすくなるのは間違いなしですね（盲信）。