我对这个文档的设计是全面理清Vue3+TypeScript+Webpack5+Vite2+Element-Plus+ECharts的知识内容，这些技术也是目前对公司vue项目进行升级和开发所需要的核心知识内容，为了能够使小组成员快速上手vue3+ts，我决心着手整理这个文档。

目前appadmin项目vue2.x版本下存在的不足

在vue2的使用过程中常常会遇到一些体验不太好的地方，比如：

  • 随着功能的增长，需求的增加，复杂组件的代码越来越难以维护，逻辑混乱。虽然vue2也有一些复用的方法，但是都存在一定的弊端，比如：常用的Mixin，容易发生命名冲突，暴露出来的变量意图不明显，重用到其他组件容易冲突。
  • vue2对于typeScript的支持非常有限，没有考虑到ts的集成。

vue3的出现在一定程度上就是为了解决vue2的弊端，其composition API很好的解决了逻辑复用的问题，而且vue3源码就是用ts写的，对ts的支持非常好。我们在开发项目过程中可以使用ts的加持，使代码更加健壮。

该文档的核心内容

  1. Vue3核心知识解析;
  2. Vue-Router4.x、Vuex4.x、Composition API等解析;
  3. 基于Webpack5、Vite2分别搭建Vue3项目;
  4. TypeScript基础、高级语法解析、应用;
  5. Vue3、Vue-Router、Vuex、Hooks、Element-Plus、ECharts、TypeScript、Axios、Less的后台管理系统项目应用;
  6. 实际项目中的高级组件拆分、封装，项目架构设计等:
  7. Vue3项目的打包、优化、自动化部署等;
  8. Vue3相关的原理、源码分析等;

Vue3核心语法以及全家桶

首先从Vue3的基础开始聊起，会全面、详细的解析 Vue3的所有核心知识内容:

  • 基础语法
  • 组件化开发
  • Vue3核心语法(2. Composition APl、Provide、Inject、Teleport、自定义Hook等)
  • 过渡动画

也包括Vue3全家桶中的 Vue-Router4.x以及Vuex4.0的版本等，除语法层面外，我会尝试去阐述Vue3的各种原理，通过阅读部分核心源码，进一步理解Vue3。

Webpack5、vite2分别搭建Vue3开发环境

其次，在使用Vue CLI时会通过Webpack5和 Vite2分别搭建Vue的开发环境。
目前Vue的脚手架依然是基于 Webpack的，所以继续理清Webpack的相关技能依然尤为重要。

Vite工具推出后在前端社区引起了巨大的反响，并且在之后是有可能取代Webpack的，所以我们对Vite2进行分析和学习，然后再基于Vite2搭建Vue的开发环境。

TypeScript语法及类型思维

另外，会认真扒一扒TypeScript相关的语法，包括搭建TypeScript环境、TypeScript基础和高级语法的应用。

在后续公司的项目中，我期待也能直接使用TypeScript来进行编写，这样不仅仅学习了Type Script的语法，也可以彻底掌握TypeScript在工作中的运用，培养编程语言中的类型思维。

vue3带来的变化

源码层面

  • 源码通过monorepo的形式来管理源代码
    • Mono：单个
    • Repo：repository仓库
    • 主要是将许多项目的代码存储在同一个repository中；
    • 这样做的目的是多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理；
    • 而且模块划分的更加清晰，可维护性、可扩展性更强；
  • 源码使用TypeScript来进行重写
    • 在Vue2.x的时候，Vue使用Flow来进行类型检测；
    • 在Vue3.x的时候，Vue的源码全部使用TypeScript来进行重构，并且Vue本身对TypeScript支持也更好了；

性能方面

  • 使用Proxy进行数据劫持
    • 在Vue2.x的时候，Vue2是使用Object.defineProperty来劫持数据的getter和setter方法的；
    • 这种方式存在一个缺陷就是当给对象添加或者删除属性时，是无法劫持和监听的；
    • 所以在Vue2.x的时候，不得不提供一些特殊的API，比如$set或$delete，事实上都是一些hack方法，也增加了开发者学习新的API的成本；
    • 而在Vue3.x开始，Vue使用Proxy来实现数据的劫持；
  • 删除了一些不必要的API：
    • 移除了实例上的$on, $off 和 $once；
    • 移除了一些特性：如filter、内联模板等；
  • 包括编译方面的优化：
    • 生成Block Tree、Slot编译优化、diff算法优化；

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函数，来将一部分独立的逻辑抽取出去，并且它们还可以做到是响应式的；
    • 更具体的好处…；