课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：
3-1 章节导学
3-2 vue3 新特性巡礼
3-3 【扩展学习】使用 vue-cli 配置 vue3 开发环境
3-4 【扩展学习】项目文件结构分析和推荐插件安装
3-5 为什么会有 vue3

课程讲师：张轩

课程内容：

今天课程学习的主要知识点内容包括：
1、vue3 新特性；
2、使用 vue-cli 配置 vue3 开发环境；
3、eslint 不生效的处理方式；
4、vue3解决的问题;

课程收获：

通过学习老师的视频课程和同学的公开笔记，主要收获如下：
一、vue3 新特性
1、性能提升（得益于重写虚拟dom的实现和tree-shaking的优化）
打包大小减少41%
初次渲染快55%，更新快133%
内存使用减少54%

2、Composition API（一系列api的合集，解决复杂组件难以维护的问题）
ref和reactive
computed和watch
新的生命周期函数
自定义函数 - Hooks

4、其他新增特性
Teleport - 瞬移组件的位置
Suspense - 异步加载新组件的新福音
全局API的修改和优化
其他试验中的新特性

5、更好的ts支持

二、使用 vue-cli 配置 vue3 开发环境

// 安装或者升级
npm install -g @vue/cli
# OR
yarn global add @vue/cli

// 保证 vue cli 版本在 4.5.0 以上
vue --version

// 创建项目
vue create my-project

1、Please pick a preset - 选择 Manually select features
2、Check the features needed for your project - 多选择上 TypeScript，特别注意点空格是选择，点回车是下一步
3、Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
4、Use class-style component syntax - 输入 n，回车
5、Use Babel alongside TypeScript - 输入 n，回车
6、Pick a linter /formatter config - 直接回车
7、Pick additional lint features - 直接回车
8、Where do you prefer placing config for Babel, ESLint, etc.? - 直接回车
9、Save this as a preset for future projects? - 输入 n，回车

三、eslint 不生效的处理方式
如果 eslint 不生效，可以在根目录创建 .vscode 文件夹，然后在文件夹中创建 settings.json
然后输入

{
  "eslint.validate": [
    "typescript"
  ]
}

四、vue3解决的问题
vue2遇到的难题
1、随着功能的增长，复杂组件的代码变得难以维护
（1）功能分散，无法处理，耦合过多
（2）mixin的缺点：①命名冲突；②不清楚暴露出来变量的作用；③重用到其他comonent经常会遇到问题；
2、vue2对于ts支持有限