认识VUE 3.0

TypeScript 优势在于：

1.对数据类型增加了约束，例如：username:string 代表username 这个变量只能被赋予string类型的参数。

2.拓展 class 和 interface 的类型。

3.lambda 表达式：()=>{something}或者是()=>someting 相当于 js 中的函数，该函数写法 可以自动将 this 附加到上下文中。

技术总是在更新迭代，vue2 版本有许多明显痛点，源码自身的维护性，数据量大渲染和更新的性能问题，一些想舍弃但为了兼容一直保留的api等。

比较到这里，vue3 提供了对TypeScript 的支持，更好的逻辑复用实践等。对源码的托管也有所区别。

vue2 源码托管 在src 目录

vue3 monorepo 托管把这些模块拆分到不同的目录中，每个模块都有各自的api类型定义和测试。模块拆分细化，功能划分明确，模块之间依赖关系清晰明了，便于开发阅读、理解及更改所有模块代码，以此提高代码的可维护性。

 两版本脚本类型的不同：Vue2 使用 Flow 做类型检查，Flow 是 Facebook 出品的 JavaScript 静态类型检查工具，它可以以非常小的成本对已 有的 JavaScript 代码迁入，非常灵活。但是 Flow 对于一些复杂场景类型的检查，支持得并不好。 Vue3 使用 TypeScript 重构了整个项目。TypeScript 提供了更好的类型检查，能支持复杂的类型推导。开发人员编写 代码可以随意使用 TypeScript 或 JavaScript。

vue3 性能也有所提升，移除了冷门的 feature 拦截器及行内视图等。加入了 tree-shaking 的技术，减少打包体积。

在编译层面有所优化：

Vue2 通过数据劫持和依赖收集，数据更新并触发重新渲染的粒度是组件级的，虽然 Vue 能保证触发更新的组件最 小化，但在单个组件内部依然需要遍历该组件的整个 vnode 树。这就会导致 vnode 的性能跟模版大小正相关，跟 动态节点的数量无关，当一些组件的整个模版内只有少量动态节点时，这些遍历都是性能的浪费。 Vue3 通过编译阶段对静态模板的分析，编译生成了 Block tree。Block tree 是一个将模版基于动态节点指令切割的 嵌套区块，每个区块内部的节点结构是固定的，而且每个区块只需要以一个 Array 来追踪自身包含的动态节点。借 助 Block tree，Vue.js 将 vnode 更新性能由与模版整体大小相关提升为与动态内容的数量相关。

逻辑复用优化 ：
在 Vue2 中我们通常会用 mixins 去复用逻辑。使用单个 mixin 似乎问题不大，但是当我们一个组件混入大量不同 的 mixins 的时候，会存在两个非常明显的问题：命名冲突和数据来源不清晰。 每个 mixin 都可以定义自己的 props、data，它们之间是无感的，所以很容易定义相同的变量，导致命名冲突；对 组件而言，如果模板中使用不在当前组件中定义的变量，那么就会不太容易知道这些变量在哪里定义的，这就是数 据来源不清晰； 在 Vue3 中使用 hook 函数，整个数据来源清晰了，也不会出现命名冲突的问题。

更好的类型支持：
因为它们都是一些函数，在调用函数时，自然所有的类型就被推导出来了。不像 Options API 所有的东西使用 this。

tree-shaking 友好：
tree-shaking 有一个两个要求： 必须是 import 导入 必须是单个函数或常量导出。

实例加载 Vue2 ：
直接导出的是整个 vue 实例，如果我们只是简单的用某一些功能的话就有点累赘。 Vue3 用到的函数可以通过 import 声明，对“按需加载”有更好的支持。

语法 API 优化和逻辑组织优化：
在 Vue2 版本中，编写组件本质就是在编写一个“包含了描述组件选项的对象”，我们把它称为 Options API。Options API 的设计是按照 methods、computed、data、props 这些不同的选项进行分类。和一个逻辑点相关的代码可能写 在多个 Option 里，非常分散，如果需要修改一个逻辑点，就需要在单个文件中不断切换和寻找。 Vue3 提供了一种新的 API：Composition API，它有一个很好的机制去解决这样的问题，就是将某个逻辑关注点相关 的代码全都放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中跳来跳去。

==Composition API 属于 API 的增强，它并不是 Vue3 组件开发的范式，如果组件足够简单，可以使用 Options API。==