课程名称:Vue3 + Typescript 从0到1开发通用基础组件
课程讲师:张轩
课程内容:
今天课程学习的主要知识点内容包括:
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支持有限
共同学习,写下你的评论
评论加载中...
作者其他优质文章