Copy notes: You Yuxi talked about this in the Vue3.0 Beta live broadcast...

Copy notes: You Yuxi talked about this in the Vue3.0 Beta live broadcast...

Preface

On the evening of April 21, Vue author You Yuxi shared the Vue.js 3.0 Betalatest developments on the Bilibili live broadcast . The following is the content of the live broadcast

1. Brand new documentRFCs

Vue.js 3.0 BetaAfter the release, the focus of work is to ensure stability and promote the integration of various libraries

All progress and documents will RFCsbe seen in the new document.

2. 6.highlights

  • Performance: Performance is Vue 2.0stronger.
  • Tree shaking support: Useless modules can be "edited" to package only what is needed.
  • Composition API:combinationAPI
  • Fragment, Teleport, Suspense: "Shards", Teleportthat is Protal传送门, "Suspense"
  • Better TypeScript support: Better Ts support
  • Custom Renderer API: Custom rendering is exposedAPI

The following will be described separately in order.

3.Performance

  1. The virtual Domimplementation is rewritten (and compatibility is guaranteed, and the demand for rendering out of the template is strong).
  2. Optimization of compiled templates.
  3. More efficient component initialization.
  4. updatePerformance improved by 1.3~2 times.
  5. SSRThe speed is increased by 2~3 times.

The following is the performance comparison

Point 1: Optimization of compiled templates

Suppose you want to compile the following code

<div>
  <span/>
  <span>{{ msg }}</span>
</div>

Will be compiled into the following look:

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

Pay attention to _createVNodethe "1" at the end of the second :

Vue will generate number(greater than 0) values at runtime, which are PatchFlagused as markers.

Only the PatchFlagmarked nodes will be truly tracked, and no matter how deep the nesting is, its dynamic nodes are directly bound to the Blockroot node, no need to traverse static nodes

Look at the following example:

<div>
  <span>static</span>
  <span :id="hello" class="bar">{{ msg }} </span>
</div>

Will be compiled into:

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 became9/* TEXT, PROPS */, ["id"]

It will tell us not only TEXTchanges, but also PROPSchanges (id)

This not only breaks the virtual domperformance bottleneck, but also retains the renderflexibility that can be written by hand . It is equivalent to: both reactflexibility and performance guarantee based on templates.

Point 2: Event monitoring cache:cacheHandlers

Suppose we want to bind an event:

<div>
  <span @click="onClick">
    {{msg}}
  </span>
</div>

After closing 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"])
  ]))
}

onClickIt will be regarded as PROPSdynamic binding and needs to be updated when the click event is replaced subsequently.

After opening 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], Will automatically generate and cache an inline function, "magically" becomes a static node. Ps: Equivalent to ReactChina useCallbackAutomation.

And supports handwritten inline functions:

<div>
  <span @click="()=>foo()">
    {{msg}}
  </span>
</div>

Supplement: PatchFlagsEnumeration definition

By querying the Tsenumeration definition, we can see that the following tracking tags are defined respectively:

Those interested can see the source code:packages/shared/src/patchFlags.ts

4. Tree shaking support

  • Useless modules can be "edited" to package only what is needed (for example v-model,<transition>, they won't be packaged if they are not used).
  • HelloWorldThe size of a simple " " is only: 13.5kb
    • 11.75kb, only Composition API.
  • Contains full runtime functionality: 22.5kb
    • Have more functions, but Vue 2more mini.

In many cases, we do not need vueall the features provided in vue 2and no way ruled out, but the introduction of demand became 3.0 can do.

5. Composition API

And React Hookssimilar things are implemented in different ways.

  • With conventional Options APIuse with
  • Flexible logic combination and reuse
  • vue 3The responsive module can be used with other frameworks

Mixin ( mixin) will no longer be used as a recommendation, and Composition APIcan achieve more flexible and side-effect-free code reuse.

Those interested can view: https://composition-api.vuejs.org/#summary

Composition APIContains six mainAPI

You can check here: https://composition-api.vuejs.org/api.html#setup

Ps: The others are common tool functions, so you can ignore them first.

6. Fragment

FragmentTranslated as: "fragment"

  • No longer limited to a single root node in the template
  • renderFunction can also return the array, and to achieve a similar React.Fragmentsfunctionality.
  • ' Just works'

6.1 <Teleport>

  • Formerly known as <Portal>, translated as portal.
  • More details will be shared by @Linusborg

<Teleport>Originally benchmarking React Portal(adding multiple new functions, stronger)

But because Chromethere is a proposal, a new name called PortalNative will be added element. To avoid naming conflicts, it will be changed toTeleport

6.2 <Suspense>

SuspenseTranslated as: "Suspense"

  • Can wait for nested asynchronous dependencies in the nesting level
  • stand byasync setup()
  • Support for asynchronous components

Although it was React 16introduced Suspense, it is not very useful until now. How to combine it with asynchronous data has not been fully designed yet.

Vue 3 is <Suspense>more lightweight:

Only 5% of applications can perceive the scheduling difference at runtime. Under comprehensive consideration, Vue3 <Suspense>does not perform the same runtime scheduling processing as React.

7. Better TypeScriptsupport

  • Vue 3Is TypeScripta library written, you can enjoy automatic type definition prompts
  • JavaScriptAnd TypeScriptthe API is the same.
    • In fact, the code is basically the same
  • stand byTSX
  • classThe component will continue to be supported, but it needs to be introduced vue-class-component@next. The module is still in the alpha stage.

There are also Vue 3 + TypeScriptplugins under development, with type checking, automatic completion and other functions. The progress is gratifying.

8 Custom Renderer API.: Custom renderer API

  • NativeScript VueIntegration in progress
  • Users can try to WebGLcustomize the renderer and use it with ordinary Vue applications ( Vugel).

Means that in the future can be vue, Domto programmatically webglprogramming. If you are interested, please see here: Getting started vugel

9. Remaining work

9.1 Docs & Migration Guides

  • @NataliaTepluhina, @sdras, @bencodezen & @phananResponsible for writing new documents
  • @sdras Is doing automatic upgrade migration tool
  • @sodatea Has started researchCodeMods

9.2 Router

  • The next generation Router: vue-router@nextalready in the alphastage, thanks@posva

There are some APIchanges, which can be RFCseen above.

9.3 Vuex

`

  • Next generation Vuex:, vuex@next(with the Vue 3 compatsame API), already in the alphastage, thanks @KiaKing.
  • The team is experimenting Vuex APIwith simplification for the next iteration

At present, it is mainly compatible Vue 3, basically there is no APIchange, don't panic.

9.4 CLI

  • CLIPlug-in: vue-cli-plugin-vue-nextby@sodatea
  • (Wip) CodeModsSupport upgrade Vue 2application

9.5 New tool: vite(French "fast")

Address: https://github.com/vuejs/vite

A simple httpserver, no need to webpackcompile and package, Vuedirectly send back to rendering according to the requested file, and support hot update (very fast)

9.6 vue-test-utils

  • Next generation test-utils:test-utils@next
    • by @lmiller1990, @dobromir-hristov, @afontcu & @JessicaSachs

9.7 DevTools

  • The early prototype has been completed by @Akryum, and when we arrive beta, it will be fully integrated.

At present, more effort is needed to improve.

9.8 IDE Support (Vetur)

  • @znckThe type check of the template is currently being tested
  • @octrefWill Vue 3be Veturintegrated in May

9.9 Nuxt

The current Nuxtintegration work is also underway, and the internal team is already running. Still need time to break in

10 Vue 2.xand 2.7 version

  • There will be the last minor version (2.7)
  • Vue 3Improved compatibility from backward porting (without damaging compatibility)
  • Plus Vue 3deprecation warnings for features removed in
  • LTS1 18 months.

Final recommendation: Vue 3Although good, if your project is very stable, and does not require too many new features or the migration cost is too high, then it is not recommended to upgrade.

end

It took a whole night to replay and sort it out repeatedly. If there are errors, please understand.

Attachment: URL of the rendering template viewing tool used in the live broadcast : https://vue-next-template-explorer.netlify.app/

Reference: https://cloud.tencent.com/developer/article/1621579 Notes: You Yuxi talked about this in the Vue3.0 Beta live broadcast...-Cloud + Community-Tencent Cloud