// Vue2
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>
1
2
3
4
5
6
7
8

在 Vue3 中，我们可以组件包含多个根节点，可以少写一层。

<template>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</template>
1
2
3
4
5

3、异步组件

Vue3 提供 Suspense 组件，允许程序在等待异步组件时渲染兜底的内容，比如 loading，使用户体验更平滑。使用 Suspense，需要在模板中生命，并包括两个明明插槽：default 和 fallback。Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。

<tempalte>
   <suspense>
     <template #default>
       <todo-list />
     </template>
     <template #fallback>
       <div>
         Loading...
       </div>
     </template>
   </suspense>
</template>
1
2
3
4
5
6
7
8
9
10
11
12

注意：

如果想在 setup 中调用异步请求，需要在 setup 前加上 async 关键字。这时，会受到警告 async setup() is used without a suspense boundary。


解决方案：
在父页面调用当前组件外包裹一层 Suspense 组件。

4、Teleport

类似于 component 和 keep-alive，teleport 同样是 Vue 的内建组件。

可以将部分DOM移动到 Vue app 之外的位置，比如项目中常见的 Dialog

<button @click="dialogVisible = true">点击</button>
<teleport to="body">
   <div class="dialog" v-if="dialogVisible">
   </div>
</teleport>
1
2
3
4
5

逻辑上而言，

这个容器，仍然可以与这个组价内的方法进行交互等等，但是它会被渲染到 DOM 结构的其他地方。在上面的代码中，是在 body 元素内，可以通过页面源代码查看。

5、组合式API

Vue2 是 选项式API（Option API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期函数等），导致代码的可读性变差，需要上下来回跳转文件位置。

Vue3 组合式API（Composition API） 则很好的解决了这个问题，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性。

6、响应式

Vue2 的响应式原理基础是 Object.defineProperty

Vue3 响应式原理基础是 Proxy

1. Object.defineProperty

基本用法：直接在一个对象上定义新的属性或修改现有的属性，并返回对象。

Vue3为什么会抛弃它呢? 是因为它有一定的缺陷。

主要原因：无法监听对象或数组新增、删除的元素。

Vue2 方案：针对常用的数组原型方法 push、pop、shift、unshift、splice、sort、reverse 进行了 hack 处理。提供 Vue.set 监听对象/数组新增属性。对象的新增/删除响应，还可以 new 个新对象，新增则合并新属性和就对象；删除则将删除属性后的对象深拷贝给新对象。

注意: Object.defineProperty 是可以监听数组已有元素的，但 Vue2 没有提供的原因是 性能 问题。这点是尤大大在 GitHub 回答的。

2.Proxy

Proxy 是 ES6新特性，通过第2个参数 handler 拦截目标对象的行为。相较于 Object.defineProperty 提供语言全范围的响应能力，消除了局限性，但在兼容性上放弃了IE11及以下。

• 对象/数组的新增、删除
• 监测 .length 修改
• Map、Set、WeakMap、WeakSet 的支持

基本用法：创建对象的代理，从而实现基本操作的拦截和自定义操作。