Vue3+TypeScript学习笔记: 0前言
1、Vue3带来的变化(源码)
- Vue3带来了新的特性
更好的性能
更小的包体积
更好的TypeScript集成
更优秀的API设计 - 源码通过monorepo的形式来管理源代码
Mono:单个;
Repo:repository仓库;
主要是将许多项目的代码存储在同一个repository中;
这样做的目的是多个包本身相互独立,可以有自己的功能逻辑、单元测试等,同时又在同一个仓库下方便管理;
而且模块划分的更加清晰,可维护性、可扩展性更强;
- 源码使用TypeScript来进行重写
在Vue2.x的时候,Vue使用Flow来进行类型检测;
在Vue3.x的时候,Vue的源码全部使用TypeScript来进行重构,并且Vue本身对TypeScript支持也更好;
2、Vue3带来的变化(性能)
- 使用Proxy进行数据劫持
这种方式存在一个缺陷就是当给对象添加或删除属性时,是无法劫持和监听的;
所以在Vue2.x的时候,不得不提供一些特殊的API,比如$set或$delete,事实上都是一些hack方法,也增加了开发者学习新的API的成本。
- 删除了一些不必要的API
移除了实例上的$on,$off和$once;
移除了一些特性:如filter、内联模板等;
- 包括编译方面的优化
生成Block Tree、Slot编译优化、diff算法优化;
3、Vue3带来的变化(新的API)
- 由Options API到Composition API
在Vue2.x的时候,我们会通过Options API来描述组件对象;
Options API包括data、props、methods、computed、生命周期等等这些选项;
存在比较大的问题是多个逻辑可能是不同的地方:比如created中会使用某一个method来修改data的数据,代码的内聚性非常差;
Composition API可以将先关联的代码放到同一处进行处理,而不需要在多个Options之间寻找;
- Hooks函数增加代码的复用性
在Vue2.x的时候,我们通常通过mixins在多个组件之间共享逻辑;
但是有一个很大缺陷就是mixins也是由一大堆的Options组成的,并且多个mixins会存在命名冲突的问题;
在Vue3.x中,我们可以通过Hook函数,来将一部分独立的逻辑抽取出去,并且它们还可以做到是响应式的;
具体的好处,会在后续的课程中演练和讲解(包括原理);
4、JavaScript
- 任何可以使用JavaScript来实现的应用最终都会使用JavaScript实现。
- JavaScript不仅能在浏览器端,并且在服务器(Nodejs)也被广泛的应用。
- 甚至是在桌面端(Electron)、移动端(React Native、Weex)。
缺点:
- 比如ES5以及之前的使用的var关键字关于作用域的问题;
- 比如最初JavaScript设计的数组类型并不是连续的内存空间;
- 比如直到今天JavaScript也没有加入类型检测这一机制;
JavaScript正在慢慢变好:
- ES6、7、8等的推出,每次都会让这门语言更加现代、安全、方便;
- JavaScript在类型检测上依然是毫无进展。(即错误出现的越早越好)
JavaScript在最初没有考虑类型约束的问题,容易造成类型思维的缺失;
前端开发人员通常不关心变量或者参数是什么类型的,如果在必须确定类型时,我们往往需要使用各种判断验证;
因此JavaScript不适合开发大型项目,这种宽松的类型约束会带来非常多的安全隐患。
在多人开发时,没有类型约束,往往会增加很多的沟通成本。
针对类型约束,推出flow和TypeScript。
Vue3.x已经全线转向TypeScript,几乎所有的代码都使用TypeScript进行了重构。
5、Vue项目通常需要掌握哪些技术栈?
- Vue3全家福
Vue3核心语法、Vue-Router路由、Vuex状态管理
- Vue3组件库
AntDesignVue、Element-Plus
- 可视化库
ECharts、Three.js、G2、L7等
- TypeScript
实际项目中使用TypeScript
- 其他技术栈
Webpack、Vite,Axios等网络请求库,Less、Sass等CSS预处理器