Vue3学习Day1 有哪些新特性?解决了Vue2的那些问题?
分类:vue
今天一起学习下大名鼎鼎的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 重构
类型系统带来了更方便的提示,并且让我们的代码能够更健壮。
- 类型系统带来了更方便的提示;
- 类型系统让代码更健壮。
Composition API
也叫组合式 API,对标的是Vue2的Option API, Option API存在的问题:
- 对TypeScript的类型推导不友好,因为所有数据都挂载在this上。 也不好做 Tree-shaking 清理代码。(Tree-shaking 是什么鬼?)
- 每次增/改,都要在data,methods 之间上下翻找代码。
- 代码不容易复用,用mixin,还有命名空间冲突的问题。
用组合式API,除了繁琐一些,会带来以下好处:
- API是import 引入的。
- 不用在methods, data 之间乱找了。
- 方便复用。
新的组件
Vue3内置了Fragment、Teleport 和 Suspense 三个新组件
- Fragment: Vue 3 组件不再要求有一个唯一的根节点,清除了很多无用的占位 div。
- Teleport: 允许组件渲染在别的元素内,主要开发弹窗组件的时候特别有用。
- Suspense: 异步组件,更方便开发有异步请求的组件。
新一代工程化工具 Vite
Vite 的竞品是 Webpack,而且按照现在的趋势看,使用率超过 Webpack 也是早晚的事。
Vite 主要提升的是开发的体验。

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu