A preliminary vue3

1. Efficiency and volume

• Compared to vue2. X, mount has a 50% improvement and 120% smaller memory footprint. Officials claim a 1.3 to 2 times performance improvement.

• Core code + Compostion API: 13.5KB, minimum 11.75KB.

• Vue3 all Runtime is 22.5KB; Vue2 is 32 KB;

  The difference between vue.js and vue.runtime.js and how to use it

Changes in 2.

• Rewrite using TS.
• Compile on demand.
• Load on demand: load basic Virtual DOM by default, responsive algorithm; For functions that are not commonly used, they are loaded on demand. Eg: V-model, Transtvion.
• New composition API.
• Update Fragments, Teleport, Suspense (components load other components asynchronously).

3. com piler principle

• Vue-template-compiler is used to compile the template part of the VUE single-file component (SFC) into the render function. Note that this part of compilation is done in the browser, so the Compiler optimization in Vue3 improves JS processing speed and reduces memory footprint.

• Vue provides an online tool for typing the template content to get compiled results.

  Vue2 address: template-Explorer

  Vue3 address: template-Explorer

• To optimize the

  • Dynamic node marking

    Eg: Hello World! Is a static node; If {{MSG}} is a dynamic node, it will be marked: 1 /* TEXT */

      <div>Hello World!</div>
      <div>{{msg}}</div>
  
  Copy the code

  import { createVNode as _createVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from "vue"
  
  export function render(_ctx, _cache, $props, $setup, $data, $options) {
    return (_openBlock(), _createBlock(_Fragment, null, [
      _createVNode("div".null."Hello World!"),
      _createVNode("div".null, _toDisplayString(_ctx.msg), 1 /* TEXT */)].64 /* STABLE_FRAGMENT */))}// Check the console for the AST
  }
  Copy the code

  • hoistStatic

      <div>Hello World!</div>
      <div>{{msg}}</div>
  Copy the code

  Before hoistStatic is enabled

  import { createVNode as _createVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from "vue"
  
  export function render(_ctx, _cache, $props, $setup, $data, $options) {
    return (_openBlock(), _createBlock(_Fragment, null, [
      _createVNode("div".null."Hello World!"),
      _createVNode("div".null, _toDisplayString(_ctx.msg), 1 /* TEXT */)].64 /* STABLE_FRAGMENT */))}Copy the code

  Open hoistStatic to separate the static node.

  import { createVNode as _createVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from "vue"
  
  const _hoisted_1 = /*#__PURE__*/_createVNode("div".null."Hello World!", -1 /* HOISTED */)
  
  export function render(_ctx, _cache, $props, $setup, $data, $options) {
    return (_openBlock(), _createBlock(_Fragment, null, [
      _hoisted_1,
      _createVNode("div".null, _toDisplayString(_ctx.msg), 1 /* TEXT */)].64 /* STABLE_FRAGMENT */))}Copy the code

  Open hoistStatic to merge multiple large static nodes into a string (consecutive >=10 static nodes).

  import { createVNode as _createVNode, toDisplayString as _toDisplayString, createStaticVNode as _createStaticVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from "vue"
  
  const _hoisted_1 = /*#__PURE__*/_createStaticVNode("
          
  
           Hello World! 
          
          
  
           Hello World! 
          
          
  
           Hello World! 
          
          
  
           Hello World! 
          
          
  
           Hello World! 
          
          
  
           Hello World! 
          
          
  
           Hello World! 
          
          
  
           Hello World! 
          
          
  
           Hello World3333! 
          
          
  
           Hello World! 
          
  ".10)
  
  export function render(_ctx, _cache, $props, $setup, $data, $options) {
    return (_openBlock(), _createBlock(_Fragment, null, [
      _hoisted_1,
      _createVNode("div".null, _toDisplayString(_ctx.msg), 1 /* TEXT */)].64 /* STABLE_FRAGMENT */))}Copy the code

  • cacheHandlers

    Caches component bound events, not creating new ones each time. Reduce memory usage.

  import { toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
  
  export function render(_ctx, _cache, $props, $setup, $data, $options) {
    return (_openBlock(), _createBlock("div", {
      onClick: _cache[1] || (_cache[1] = (. args) = >(_ctx.handle && _ctx.handle(... args))) }, _toDisplayString(_ctx.msg),1 /* TEXT */))}Copy the code

Upgrading of old projects

• More than 90% of logic can be reused with VUe2.
• Vue3 deprecates the beforeCreate, create lifecycle hook function, and vue3 is written in the setup () function.
• Mixins are not recommended for vue3 and should be rewritten to a new composite API.