Vue3学习Day1 有哪些新特性？解决了Vue2的那些问题？

今天一起学习下大名鼎鼎的Vue3 有哪些新特性？

在开始之前，先了解下 Vue2存在的问题。

Vue2的缺陷

• 维护角度： 采用Flow.js来做类型校验， Flow.js已经停止维护了。（说实话我都没听说过）
• 二次开发难度：直接执行浏览器API,跨端方案带来问题。
• 开发角度：并非真正意义的代理，是基于defineProperty()实现的。删除数据无法监听。

Vue3的新特性

Vue 3 就是继承了 Vue 2 具有的响应式、虚拟 DOM，组件化等优点的同时，解决了历史包袱。从以下7个方面来看下Vue3的新特性。

RFC机制

现在Vue 的新语法或者新功能的讨论，都会先在 GitHub 上公开征求意见，社区的人一起讨论。 RFC 的引入，让 Vue 生态更加开放。

响应式系统

Vue2的响应式是基于Object.defineProperty() 这个 API 实现的。 问题是：对于不存在的属性拦截不了，Vue2 所有数据必须要在 data 里声明。

Proxy才是真正的代理。

自定义渲染器

Vue 2 内部所有的模块都是揉在一起的，这样做会导致不好扩展的问题。 Vue 3 通过拆包，使用最近流行的 monorepo 管理方式，响应式、编译和运行时全部独立。

TypeScript 重构

类型系统带来了更方便的提示，并且让我们的代码能够更健壮。

1. 类型系统带来了更方便的提示；
2. 类型系统让代码更健壮。

Composition API

也叫组合式 API，对标的是Vue2的Option API， Option API存在的问题：

1. 对TypeScript的类型推导不友好，因为所有数据都挂载在this上。 也不好做 Tree-shaking 清理代码。(Tree-shaking 是什么鬼？)
2. 每次增/改，都要在data,methods 之间上下翻找代码。
3. 代码不容易复用，用mixin，还有命名空间冲突的问题。

用组合式API，除了繁琐一些，会带来以下好处：

1. API是import 引入的。
2. 不用在methods, data 之间乱找了。
3. 方便复用。

新的组件

Vue3内置了Fragment、Teleport 和 Suspense 三个新组件

• Fragment: Vue 3 组件不再要求有一个唯一的根节点，清除了很多无用的占位 div。
• Teleport: 允许组件渲染在别的元素内，主要开发弹窗组件的时候特别有用。
• Suspense: 异步组件，更方便开发有异步请求的组件。

新一代工程化工具 Vite

Vite 的竞品是 Webpack，而且按照现在的趋势看，使用率超过 Webpack 也是早晚的事。

Vite 主要提升的是开发的体验。