なぜこんなに早いですか？

よく知っています。プログラマが追求するのは「速い」です。もちろん何でも早いのではなく、早く起きてはいけないことがあります。
昨日Vue 3.0が正式に発表されました。興奮した心、震える手、髪の毛を触りました。
Vue 3.0はVue 2.xに比べて性能が1.2～2倍も上がったと言われていますが、なぜ彼はこんなに速いのですか？
vue 3.0は以下のことをしました。

diffアルゴリズム最適化

静的リフティング（HoistStatic）

事件聴取器キャッシュ

SSR最適化（気分更新を見る）

diffアルゴリズムの最適化
Vue 2.xのdiffアルゴリズム
vue 2.xのdiffアルゴリズムをフルボリューム比較といい、名前の通り、データが変わると最初から最後までvDom比較を行います。一部の内容は永久不変です。

Vue 3.0のdiffアルゴリズム
vue 3.0のdiffアルゴリズムに静的マーカーというものがありますが、静的なマークは何ですか？
簡単に言えば、もしあなたの内容が変わるなら、flagsをあげます。次のデータを更新する時、直接にあなたと比べてみます。マークがないのとは比べられません。

export function render(_ctx, _cache, $props, $setup, $data, $options) {
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
                        //    1      
 ]))
}

では、誰かがまた聞きました。なぜ1なのですか？

TEXT = 1 //       
CLASS=1<<1,1 // 2//  class
STYLE=1<<2，// 4 //  style
PROPS=1<<3,// 8 //    ，         
FULLPR0PS=1<<4,// 16 //    key  ， key   ，       diff  。
HYDRATE_ EVENTS = 1 << 5，// 32 //         
STABLE FRAGMENT = 1 << 6, // 64 //            fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //  key   fragment        key
UNKEYED FRAGMENT = 1<< 8, // 256 //     key  fragment
NEED PATCH = 1 << 9, // 512 //         props  
DYNAMIC_SLOTS = 1 << 10 // 1024 //   slot
HOISTED = -1 //     
//    diff         
BALL = -2

静的向上（hoist Static）
Vue 2.xでは、要素が更新に参加するかどうかにかかわらず、毎回再作成してレンダリングします。
Vue 3.0では更新に参加しない要素に対して静的に向上し、一回だけ作成され、レンダリング時に直接多重すればいいです。
それともこの熟知しているコードですか？静的アップグレードを開く前に 

export function render(_ctx, _cache, $props, $setup, $data, $options) {
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, "'HelloWorld'"),
  _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
 ]))
}

静的リフティングをオンして結果をコンパイルします。 

const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
 return (_openBlock(), _createBlock("div", null, [
  _hoisted_1,
  _hoisted_2,
  _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
 ]))
}

静的アップグレードを開いてから、直接にその二つの内容をハロルドのpタグとして宣言して外に出しました。そのまま使ってもいいです。そうすると、きっと早いですよ。 
イベントリスタキャッシュ
デフォルトではonClickはダイナミックバインディングと見なされますので、その変化を毎回追跡します。
しかし、同じ関数なので、追跡変化がなく、そのままキャッシュして多重化すればいいです。
dom構造

<div>
 <button @click = 'onClick'>  </button>
</div>

イベントリスタキャッシュを開く前: 

export const render = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("button", { onClick: _ctx.onClick }, "  ", 8 /* PROPS */, ["onClick"])
                       // PROPS=1<<3,// 8 //    ，         
 ]))
})

ここには8つがあります。このノードに静的なマークがあることを示しています。静的なマークがあるとdiffアルゴリズムのコントラストが異なりますので、時間がもったいないです。
イベントリスタキャッシュを開いた後： 

export function render(_ctx, _cache, $props, $setup, $data, $options) {
 return (_openBlock(), _createBlock("div", null, [
  _createVNode("button", {
   onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick(...args)))
  }, "  ")
 ]))
}

発見することができて、事件のヒアリング器のキャッシュを開けた後に、静的な標識がなくて、これは速くなりました。
ここでVue 3についてなぜこんなに早い文章が紹介されましたか？Vue 3の速い内容については以前の文章を検索してください。または次の関連記事を引き続き閲覧してください。これからもよろしくお願いします。