一、vue3.0 突出亮点：

1、Performance : 性能比vue2.x 快1.2～2倍
2、Tree shaking support ： 按需编译 体积比Vue2.x 更小
3、Composition APi: 组合API
4、Better TypeScript support ： 更好的ts 支持
5、Custom Renderer API ： 暴露了自定义渲染API
6、Fragment、Teleport ，Suspense： 更先进的组件

二、Vue 3.0是如何变快的

1、diff 方法优化：

vue2 中的 虚拟dom 是全量更新
vue3 中新增了静态节点PatchFlag 与上次虚拟节点进行对比的时候只对比带有patch flag 的节点 并且通过flag 的信息 当前节点 要对比的具体内容

2、静态提升 hoistStatic

vue2中 元素无论是否参与更新都会重新创建，然后渲染
https://vue-next-template-explorer.netlify.app/

  1. <div>
  2.   <p>1</p>
  3.   <p>2</p>
  4.   <p>3</p>
  5.   <p>{{msg}}</p>
  6. </div>
  9. import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
  11. export function render(_ctx, _cache, $props, $setup, $data, $options) {
  12.   return (_openBlock(), _createBlock("div", null, [
  13.     _createVNode("p", null, "1"),
  14.     _createVNode("p", null, "2"),
  15.     _createVNode("p", null, "3"),
  16.     _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  17.   ]))
  18. }

vue3中 不参与更新的元素 会进行 静态提升，只创建一次，在渲染的时候直接复用即可

  1. <div>
  2.   <p>1</p>
  3.   <p>2</p>
  4.   <p>3</p>
  5.   <p>{{msg}}</p>
  6. </div>
  8. import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
  10. const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "1", -1 /* HOISTED */)
  11. const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "2", -1 /* HOISTED */)
  12. const _hoisted_3 = /*#__PURE__*/_createVNode("p", null, "3", -1 /* HOISTED */)
  14. export function render(_ctx, _cache, $props, $setup, $data, $options) {
  15.   return (_openBlock(), _createBlock("div", null, [
  16.     _hoisted_1,
  17.     _hoisted_2,
  18.     _hoisted_3,
  19.     _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  20.   ]))
  21. }

3、cacheHandlers 事件监听缓存

默认情况下click 事件会被视为动态绑定 所以每次都会追踪变化进行渲染
但是因为同一个函数而言，不需要追踪变化直接缓存起来复用即可

  1. <div>
  2.   <p>1</p>
  3.   <p>2</p>
  4.   <p @clcik="clcikMe">3</p>
  5. </div>
  7. //cacheHandlers之前  
  8. //  _createVNode("p", { onClcik: _ctx.clcikMe }, "3", 40 /* PROPS, HYDRATE_EVENTS */, ["onClcik"])
  9.   ])) 这个3 就是追踪的类别
  11. export function render(_ctx, _cache, $props, $setup, $data, $options) {
  12.   return (_openBlock(), _createBlock("div", null, [
  13.     _createVNode("p", null, "1"),
  14.     _createVNode("p", null, "2"),
  15.     _createVNode("p", { onClcik: _ctx.clcikMe }, "3", 40 /* PROPS, HYDRATE_EVENTS */, ["onClcik"])
  16.   ]))
  17. }
  20. //cacheHandlers之后
  21. export function render(_ctx, _cache, $props, $setup, $data, $options) {
  22.   return (_openBlock(), _createBlock("div", null, [
  23.     _createVNode("p", null, "1"),
  24.     _createVNode("p", null, "2"),
  25.     _createVNode("p", {
  26.       onClcik: _cache[1] || (_cache[1] = (...args) => (_ctx.clcikMe && _ctx.clcikMe(...args)))
  27.     }, "3", 32 /* HYDRATE_EVENTS */)
  28.   ]))
  29. }

4、ssr渲染：

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