Vue3新特性

性能提升，更快

虚拟DOM重写

VDOM结构新增属性，shapeFlag、patchFlag 等做到更精确地更新

<Comp></Comp>
<div>
  <span></span>
</div>

// 编译后
export function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Comp = _resolveComponent("Comp")

  return (_openBlock(), _createElementBlock(_Fragment, null, [
    _createVNode(_component_Comp),
    _createElementVNode("div", null, [
      _createElementVNode("span")
    ])
  ], 64 /* STABLE_FRAGMENT */))
}

优化slots的生成

可以单独重新渲染父级和子级

• 确保实例正确的跟踪依赖关系
• 避免不必要的父子组件重新渲染

<Comp>
    <div>{{ hello }}</div>
</Comp>

render() {
    return h(Comp, null, {
        default: () => [h('div', this.hello)]
    }, 16)
}

静态树提升

静态树提升成const，ast中直接使用 不需要patch整棵树，降低渲染成本

<div>
  <span class="foo">Static</span>
  <span>{{ dynamic }}</span>
</div>

const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "Static", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", null, [
    _hoisted_1,
    _createElementVNode("span", null, _toDisplayString(_ctx.dynamic), 1 /* TEXT */)
  ]))
}

静态属性提升

class、id等节点静态属性也会提升出来

<div>
  <span class="foo" id="fo">{{ text }}</span>
</div>

const _hoisted_1 = {
  class: "foo",
  id: "fo"
}

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", null, [
    _createElementVNode("span", _hoisted_1, _toDisplayString(_ctx.text), 1 /* TEXT */)
  ]))
}

基于Proxy的响应式系统

JavaScript 语言本身的，支持监听对象新属性，数组（这些在Vue2中都需要单独的处理实现）

更精简，更小

通过摇树优化核心库体积

更易维护

TypeScript + 模块化

兼容，跨平台

编辑器核心和运行时核心与平台无关，使得Vue更容易与终端结合（Web、Android、iOS）

更容易使用

TypeScript支持

编辑器能提供强有力的类型检查和错误警告

调试支持

独立的响应式模块

Composition API