vue3 比 vue2.x 版本的优势

—— 先学习 Vue2.x

• Vue3.0 并不是推倒从来，很多 2.x 内容依然被保存

—— 先学习 Typescript

• Vue3.0 采用 TS 重写，必须学 TS

# 一、Vue3.0 的六大亮点

1. Performance：性能比 Vue2.x 快 1.2 ～ 2 倍
2. Tree shaking support：按需编译，体积比 Vue2.x 更小
3. Composition API *：组合式 API（类似 React Hooks）
4. Better Typescript support：更好的 TS 支持
5. Custom Renderer API：暴露了自定义渲染 API
6. Fragment，Teleport（Protal），Suspense：更先进的组件

# 二、Vue3.0 是如何变快的

Vue3 源码编译工具：Vue3 模版编译工具

Vue2.x 模版编译工具：Vue2.x 模版编译工具

# 1、diff 方法优化

• Vue2 中的虚拟 DOM 是进行全亮的对比
• Vue3 新增了静态标记（PatchFlag）
  • 在与上次虚拟节点进行对比的时候，只对比带有 patch flag 的节点
  • 并且可以通过 flag 的信息得知当前节点要对比的具体内容

<div id="app">
    <h1>技术摸鱼</h1>
    <p>今天天气真不错</p>
    <div>{{name}}</div>
</div>

--------------------

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", { id: "app" }, [
    _createVNode("h1", null, "技术摸鱼"),
    _createVNode("p", null, "今天天气真不错"),
    _createVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    _createVNode("div", {
      class: {red:_ctx.isRed}
    }, "摸鱼符", 2 /* CLASS */),
    _createVNode("button", { onClick: _ctx.handleClick }, "戳我", 8 /* PROPS */, ["onClick"])
  ]))
}

# 2、hoistStatic 静态提升

• Vue2 中无论元素是否参与更新，每次都会重新创建
• Vue3 中对于不参与更新的元素，只会被创建一次，之后会在每次渲染时被不停的复用

<div id="app">
    <h1>技术摸鱼</h1>
    <p>今天天气真不错</p>
    <div>{{name}}</div>
    <div :class="{red:isRed}">摸鱼符</div>
    <button @click="handleClick">戳我</button>
</div>


--------------------------------------


import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"

const _hoisted_1 = { id: "app" }
const _hoisted_2 = /*#__PURE__*/_createVNode("h1", null, "技术摸鱼", -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createVNode("p", null, "今天天气真不错", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", _hoisted_1, [
    _hoisted_2,
    _hoisted_3,
    _createVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */),
    _createVNode("div", {
      class: {red:_ctx.isRed}
    }, "摸鱼符", 2 /* CLASS */),
    _createVNode("button", { onClick: _ctx.handleClick }, "戳我", 8 /* PROPS */, ["onClick"])
  ]))
}

// Check the console for the AST

# 3、cacheHandlers 事件侦听器缓存

• 默认情况下 onClick 会被视为动态绑定，所以每次都会去追踪它的变化
• 但是因为是同一个函数，所以没有追踪变化，直接缓存起来复用即可

<div id="app">
    <button @click="handleClick">戳我</button>
</div>



----------------------------------------


import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"

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

// Check the console for the AST

# 4、SSR 渲染

• 当有大量静态的内容的时候，这些内容会被当作纯字符串推进一个 buffer 里面；即使存在动态绑定，会通过模版值嵌入进去，这样会比通过虚拟 dom 来渲染快上很多很多
• 当静态内容大到一定的量级时候，会用_createStaticVNode 方法在客户端去生成一个 static node，这些静态 node，会被直接 innerHtml，就不需要创建对象，然后根据对象渲染

import {
  createVNode as _createVNode,
  openBlock as _openBlock,
  createBlock as _createBlock,
} from "vue";

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    _openBlock(),
    _createBlock("div", { id: "app" }, [
      _createVNode("h1", null, "技术摸鱼"),
      _createVNode("p", null, "今天天气真不错"),
    ])
  );
}

SSR------------------------------ - SSR;

import { mergeProps as _mergeProps } from "vue";
import {
  ssrResolveCssVars as _ssrResolveCssVars,
  ssrRenderAttrs as _ssrRenderAttrs,
} from "@vue/server-renderer";

export function ssrRender(
  _ctx,
  _push,
  _parent,
  _attrs,
  $props,
  $setup,
  $data,
  $options
) {
  const _cssVars = _ssrResolveCssVars({ color: _ctx.color });
  _push(
    `<div${_ssrRenderAttrs(
      _mergeProps({ id: "app" }, _attrs, _cssVars)
    )}><h1>技术摸鱼</h1><p>今天天气真不错</p></div>`
  );
}

// Check the console for the AST