Vue3+TypeScript

一、Vue3带来的变化(源码）

源码通过monorepo的形式来管理源代码
口Mono:单个
口Repo : repository仓库
口主要是将许多项目的代码存储在同一个repository中;
口这样做的目的是多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理口而且模块划分的更加清晰，可维护性、可扩展性更强

源码使用TypeScript来进行重写:
口在Vue2.x的时候，Vue使用Flow来进行类型检测

口在Vue3x的时候，Vue的源码全部使用TypeScript来进行重构，并且Vue本身对TypeScript支持也更好了;

二、Vue3带来的变化(性能)

使用Proxy进行数据劫持
口在Vue2.x的时候，Vue2是使用Object.defineProperty来劫持数据的getter和setter方法的;

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

三、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函数，来将一部分独立的逻辑抽取出去，并且它们还可以做到是响应式的;

四、安装和使用Vue这个JavaScript库有哪些方式呢?

1.CDN引入

什么是CDN呢?CDN称之为内容分发网络(Content Delivery Network或Content Distribution Network,缩写:CDN)
口它是指通过 相互连接的网络系统，利用最靠近每个用户的服务器
口更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户口来提供高性能、可扩展性及低成本的网络内容传递给用户
常用的CDN服务器可以大致分为两种
CDN
口自己的CDN服务器:需要购买自己的CDN服务器，目前阿里腾讯、亚马逊、Google等都可以购买CDN服务器口开源的CDN服务器:国际上使用比较多的是unpkgJSDelivr、cdnjs ;

Vue的CDN引入:
<script src="https://unpkg.com/vue@next"></script>