Vue3.0 新特性

[okboy5555]

编译时对VDom的性能优化

PatchFlag

在这个模版编译时，编译器会在动态标签末尾加上 /* Text*/ PatchFlag
只能带patchFlag 的 Node 才被认为是动态的元素，会被追踪属性的修改

hoistStatic 静态节点提升

当使用hoistStatic时，所有 静态的节点都被提升到render方法之外。这意味着，他们只会在应用启动的时候被创建一次，而后随着每次的渲染被不停的复用

cacheHandler 事件监听缓存

<div>
  <p @click="handleClick">静态代码</p>
</div>

未开启cacheHandler

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("p", { onClick: _ctx.handleClick }, "静态代码", 8 /* PROPS */, ["onClick"])
  ]))
}

开启cacheHandler

export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("p", {
      onClick: _cache[1] || (_cache[1] = ($event, ...args) => (_ctx.handleClick($event, ...args)))
    }, "静态代码")
  ]))
}

编辑器会为你动态创建一个内联函数，内联函数里面再去应用当前组件上最新的handler
这种优化更大的作用在于当其作用域组件时，之前每次重新渲染都会导致组件的重新渲染，在通过handler缓存之后，不会导致组件的重新渲染了

SSR 服务端渲染

当开启SSR了之后，如果我们模版中有一些静态标签，这些静态标签会被直接转化成文本

StaticNode 静态节点

在客户端，当静态节点嵌套足够多的时候，VUE编译器也会将VDOM转化为纯字符串的HTML

[okboy5555]

有文档了：
https://composition-api.vuejs.org/zh/#%E6%A6%82%E8%BF%B0

[okboy5555]

Tree Shaking

我们在项目中都会使用一些构建工具如Webpack，Rollup，这些工具都是有treeshaking功能的， 前提是所有的东西都需要import来写，但是工具对于库本身无法进行tree-shaking。所以v3本身在对于代码打包的时候会做一些操作，只引入用到的模块。