Vue3与Vue2特性对比

数据监听

vue3基于proxy实现，消除了vue2的Object.defineProperty()的诸多限制：

1. 只能监听属性，不能监听对象
2. 检测属性的添加和删除
3. 检测数组的索引和长度变化
4. 支持Map, Set, WeakMap, WeakSet

组合式API

可与现有的Options API一起使用，可以使代码更加容易维护，将相同功能的函数进行集中式管理。

Framents

vue3组件现在支持有多个根节点

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Teleport

Teleport 是一种能够将的模板移动到 DOM 中除 Vue app 之外的其他位置的技术。

<button @click="showToast" class="btn">打开 toast</button>
<!-- to 属性就是目标位置 -->
<teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
        <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
</teleport>

createRenderer

通过createRenderer，可以构建自定义渲染器