日韩激情视频青青草,强开小嫩苞一区二区三区视频,豆花一区在线观看,黄色一级在线视频,三级精品,久热久热在线,色色色五月婷婷,无码人妻精品一区二区蜜桃色欲

前言

在 4 月 21 日晚，Vue 作者尤雨溪在嗶哩嗶哩直播分享了Vue.js 3.0 Beta最新進(jìn)展。以下是直播內(nèi)容整理

1. 全新文檔`RFCs`

Vue.js 3.0 Beta發(fā)布后的工作重點是保證穩(wěn)定性和推進(jìn)各類庫集成

所有的進(jìn)度和文檔都將在全新RFCs文檔可以看到。

2. 六大亮點

Performance：性能更比Vue 2.0強(qiáng)。
Tree shaking support：可以將無用模塊“剪輯”，僅打包需要的。
Composition API：組合API
Fragment, Teleport, Suspense：“碎片”，Teleport即Protal傳送門，“懸念”
Better TypeScript support：更優(yōu)秀的 Ts 支持
Custom Renderer API：暴露了自定義渲染API

下面將按順序分別描述。

3.`Performance`

重寫了虛擬Dom的實現(xiàn)（且保證了兼容性，脫離模版的渲染需求旺盛）。
編譯模板的優(yōu)化。
更高效的組件初始化。
update性能提高 1.3~2 倍。
SSR速度提高了 2~3 倍。

下面是各項性能對比

要點 1：編譯模板的優(yōu)化

假設(shè)要編譯以下代碼

    {{ msg }}

將會被編譯成以下模樣：

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {  return (_openBlock(), _createBlock("div", null, [    _createVNode("span", null, "static"),    _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)  ]))}
// Check the console for the AST

注意看第二個_createVNode結(jié)尾的“1”：

Vue 在運(yùn)行時會生成number（大于 0）值的PatchFlag，用作標(biāo)記。

僅帶有PatchFlag標(biāo)記的節(jié)點會被真正追蹤，且無論層級嵌套多深，它的動態(tài)節(jié)點都直接與Block根節(jié)點綁定，無需再去遍歷靜態(tài)節(jié)點

再看以下例子：

  static  {{ msg }}

會被編譯成：

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {  return (_openBlock(), _createBlock("div", null, [    _createVNode("span", null, "static"),    _createVNode("span", {      id: _ctx.hello,      class: "bar"    }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["id"])  ]))}

PatchFlag?變成了9 /* TEXT, PROPS */, ["id"]

它會告知我們不光有TEXT變化，還有PROPS變化（id）

這樣既跳出了virtual dom性能的瓶頸，又保留了可以手寫render的靈活性。等于是：既有react的靈活性，又有基于模板的性能保證。

要點 2: 事件監(jiān)聽緩存：`cacheHandlers`

假設(shè)我們要綁定一個事件：

      {{msg}}

關(guān)閉cacheHandlers后：

import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {  return (_openBlock(), _createBlock("div", null, [    _createVNode("span", { onClick: _ctx.onClick }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["onClick"])  ]))}

onClick會被視為PROPS動態(tài)綁定，后續(xù)替換點擊事件時需要進(jìn)行更新。

開啟cacheHandlers后：

import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {  return (_openBlock(), _createBlock("div", null, [    _createVNode("span", {      onClick: _cache[1] || (_cache[1] = $event => (_ctx.onClick($event)))    }, _toDisplayString(_ctx.msg), 1 /* TEXT */)  ]))}

cache[1]，會自動生成并緩存一個內(nèi)聯(lián)函數(shù)，“神奇”的變?yōu)橐粋€靜態(tài)節(jié)點。Ps：相當(dāng)于React中useCallback自動化。

并且支持手寫內(nèi)聯(lián)函數(shù)：