1 of 34

Vue 3.0 Updates

Evan You

VueFes Japan 2018

2 of 34

Vue 3.0がやってくる

  • より速く

3 of 34

Vue 3.0がやってくる

  • より速く
  • より小さく

4 of 34

Vue 3.0がやってくる

  • より速く
  • より小さく
  • よりメンテナンスしやすく

5 of 34

Vue 3.0がやってくる

  • より速く
  • より小さく
  • よりメンテナンスしやすく
  • よりネイティブ向けに作りやすく

6 of 34

Vue 3.0がやってくる

  • より速く
  • より小さく
  • よりメンテナンスしやすく
  • よりネイティブ向けに作りやすく
  • よりあなたのコードの保守性を向上

7 of 34

より速く

8 of 34

仮想DOMの実装を�フルスクラッチから作り直し

mountとpatch処理が最大100%向上

9 of 34

プロキシを用いた監視で

完全な言語レベル ＆ 速度向上

  • プロパティの追加と削除
  • 配列インデックスと配列長のミューテーション
  • Map、Set、WeakMap、WeakSet
  • クラス

​

10 of 34

ネイティブプロキシによる

プロパティプロキシの高速化

Object.definePropertyはさようなら！

11 of 34

実行中のオーバーヘッド削減のため

コンパイル時にヒントを追加

12 of 34

コンポーネント探索の高速化 + 単型の呼び出し + 子要素の種類を検出

<Comp></Comp>

<div>

<span></span>

</div>

テンプレート

コンパイラ出力

render() {

const Comp = resolveComponent('Comp', this)

return createFragment([

createComponentVNode(Comp, null, null, 0 /* 子要素なし */),

createElementVNode('div', null, [

createElementVNode('span', null, null, 0 /* 子要素なし */)

], 2 /* 子vnodeは1つ */)

], 8 /* 複数のキーを持たない子 */)

}

​

​

  • 不要な条件分岐を省略
  • JavaScriptエンジンが最適化しやすく

13 of 34

スロット生成の最適化

<Comp>

<div>{{ hello }}</div>

</Comp>

​

テンプレート

コンパイラ出力

​

render() {

return h(Comp, null, {

default: () => [h('div', this.hello)]

}, 16 /* コンパイラが生成したスロット */)

}

​

  • インスタンスが依存関係を正しくトラッキングできるように
  • 不要な親/子のレンダリングを回避

14 of 34

Static Tree Hoisting （静的ツリーの巻き上げ）

<div>

<span class="foo">

Static

</span>

<span>

{{ dynamic }}

</span>

</div>

​

​

テンプレート

コンパイラ出力

const __static1 = h('span', {

class: 'foo'

}, 'static')

​

render() {

return h('div', [

__static1,

h('span', this.dynamic)

])

}

​

  • ツリー全体へのpatch適用をスキップ

15 of 34

Static Props Hoisting （静的プロパティの巻き上げ）

<div id="foo" class="bar">

{{ text }}

</div>

​

テンプレート

コンパイラ出力

const __props1 = {

id: 'foo',

class: 'bar'

}

​

render() {

return h('div', __props1, this.text)

}

​

  • ノード自体へのpatch適用は省略するが、�子要素のpatch適用は実施する

16 of 34

Inline Handler Hoisting（インラインハンドラの巻き上げ）

<Comp @event="count++"/>

テンプレート

コンパイラ出力

import { getBoundMethod } from 'vue'

​

function __fn1 () {

this.count++

}

​

render() {

return h(Comp, {

onEvent: getBoundMethod(__fn1, this)

})

}

​

  • 異なるインライン関数のため再描画は省略できる

17 of 34

コンポーネントインスタンスの初期化が

最大で100%も高速化

18 of 34

アプリ全体の

速度が2倍に

メモリ使用量が半減

19 of 34

v2.5

v3.0-proto

  • 3000コンポーネントのインスタンスをレンダリングする

20 of 34

より小さく

21 of 34

Tree-shakingへの対応

  • ビルトインのコンポーネント (keep-alive, transition…)
  • ディレクティブのヘルパー (v-model, v-for…)
  • ユーティリティ関数 (asyncComponent, mixins, memoize...)

22 of 34

新コアのランタイムサイズ: Gzipで10kb以下

23 of 34

よりメンテナンスしやすく

24 of 34

アーキテクチャの整理

パッケージの分離

テストセットアップの改善

25 of 34

よりネイティブ向けに作りやすく

26 of 34

カスタムレンダラAPI

Demo

27 of 34

あなたのコードの

保守性を向上

28 of 34

リアクティビティAPI

Demo

29 of 34

コンポーネントの

再描画を

理解する

Demo

30 of 34

TSXによる

TypeScriptサポートの強化

Demo

31 of 34

警告トレースの改善

Demo

  • 関数コンポーネントも対象に
  • プロパティのインスペクション
  • 警告時にトレースできる場面が増加

32 of 34

実験的な Hooks API

Demo

33 of 34

実験的な “Time Slicing”

Demo

34 of 34

ありがとうございました！