Vue3 作为目前比较火的一个框架，无论是在项目开发中还是在面试中，用到的都挺多。本篇文章就介绍下 Vue3 的一些基础难点以及与 Vue2 的一些区别。
- 1、生命周期
- 2、多根节点
- 3、异步组件
- 4、Teleport
- 5、组合式API
- 6、响应式
- 1. Object.defineProperty
- 2.Proxy
整体来看，变化不大，只是名字大部分需要 + on，功能上类似。
使用上Vue3组合式API需要先引入，
Vue2选项API则可以直接调用。如下代码所示：
// vue3 // vue2
常用生命周期表格如下所示。
| Vue2 | Vue3 |
|---|---|
| beforeCreate | Not needed |
| created | Not needed |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdate |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
注意：
setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地去定义
Vue3 支持了多根节点组件，也就是 fragment。
Vue2 中，编写页面的时候，我们需要去将组件包裹在 中，否则会报错警告。
// Vue2... ...
在 Vue3 中，我们可以组件包含多个根节点，可以少写一层。
3、异步组件... ...
Vue3 提供 Suspense 组件，允许程序在等待异步组件时渲染兜底的内容，比如 loading，使用户体验更平滑。使用 Suspense，需要在模板中生命，并包括两个明明插槽：default 和 fallback。Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。
注意：
4、Teleport如果想在 setup 中调用异步请求，需要在 setup 前加上 async 关键字。这时，会受到警告 async setup() is used without a suspense boundary。
解决方案：
在父页面调用当前组件外包裹一层 Suspense 组件。
类似于 component 和 keep-alive，teleport 同样是 Vue 的内建组件。
可以将部分DOM移动到 Vue app 之外的位置，比如项目中常见的 Dialog
逻辑上而言， 这个容器，仍然可以与这个组价内的方法进行交互等等，但是它会被渲染到 DOM 结构的其他地方。在上面的代码中，是在 body 元素内，可以通过页面源代码查看。
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.ProxyProxy 是 ES6新特性，通过第2个参数 handler 拦截目标对象的行为。相较于 Object.defineProperty 提供语言全范围的响应能力，消除了局限性，但在兼容性上放弃了IE11及以下。
- 对象/数组的新增、删除
- 监测 .length 修改
- Map、Set、WeakMap、WeakSet 的支持
基本用法：创建对象的代理，从而实现基本操作的拦截和自定义操作。
