vue3快速上手经验总结

待我称王封你为后i 2023-09-29 13:30 40阅读 0赞

**目录**

前言：

1.vue3带来的新变化

2.vue3的重点--组合式api的理解

3.vue3和vue2的优缺点

4.使用vue3难点分析

5.vue3的语法

--------------------

#### 前言： ####

> 本文基于熟练掌握vue2的同学，没有使用过的可以去看官方文档。
> 
> --------------------
> 
> 挺长时间没有用vue3了，发现看文档浪费的时间还挺长，我想5-10分钟就掌握不容易，于是就想写一篇文章快速让我掌握vue3，于是就有了这篇文章。

**相关阅读：** [Vue3 中文文档![icon-default.png?t=M3K6][icon-default.png_t_M3K6]https://vue3js.cn/docs/zh/][Vue3 _icon-default.png_t_M3K6_icon-default.png_t_M3K6_https_vue3js.cn_docs_zh] [Vue3 设计理念![icon-default.png?t=M3K6][icon-default.png_t_M3K6]https://vue3js.cn/vue-composition/][Vue3 _icon-default.png_t_M3K6_icon-default.png_t_M3K6_https_vue3js.cn_vue-composition] **相关UI资源库和插件库：**

支持 vue3 的UI组件库: [ant-design-vue][], [element-plus][], **[vant][]**

基于composition组合api的常用集合 : [VueUse][]

--------------------

####  1.vue3带来的新变化 ####

> **+ :**
> 
> 1.性能提升
> 
> 2.更好的支持typescript
> 
> 3.组合式API : Composition API
> 
> 4.不再强制要求只有一个根元素
> 
> --------------------
> 
> **- ：**
> 
> 1.移除vue2的$on、
> 
> 2.过滤器
> 
> 3. .sync语法（与v-model合并）
> 
> --------------------
> 
> **注：**
> 
> 1.生命周期发生变化-setup替代原先前两个生命周期钩子函数（this指向undefined的原因）
> 
> 2.package.json、main.js、app.vue文件有些写法上的改变，问题不大。
> 
> 3.setup函数中记得return
> 
> --------------------
> 
> **小结：**个人以为，vue3和react hooks的写法很像

--------------------

#### 2.vue3的重点--组合式api的理解 ####

> composition API(Vue3)开发的特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便设置，如果功能复杂，代码量大，我们还可以进行逻辑拆分处理。

--------------------

#### 3.vue3和vue2的优缺点 ####

> Vue2选项式API(option api)
> 
> 优点：简单，各选项各司其职；
> 
> 缺点：不方便功能复用；功能代码分散维护代码横跳
> 
> --------------------
> 
> Vue3组合式API(composition api)
> 
> 优点：功能代码组合维护, 方便功能复用；

--------------------

#### 4.使用vue3难点分析 ####

> 最难理解的点应该是逻辑复用，既拆分各个组件，我们有时很难去把握一个度，不拆分不好复用拆的多了项目后期可能逻辑上不好理解，更别说作为接盘侠的话。
> 
> --------------------
> 
> 还有一点，使用vue3大部分代码都在setup函数中写，那么如果里面代码多了，岂不是也面临代码臃肿逻辑复杂的情况吗？可以说这个点使得使用vue3的难度上升数倍！
> 
> --------------------
> 
> 这里我以实际项目使用提出两种方案：
> 
> 1.在script标签里面setup函数外面定义函数，在setup函数里面引入函数使用。
> 
> 2.在其他文件夹下建立文件写函数，然后引入在setup函数中使用。
> 
> --------------------
> 
> **小结：**选项式API的精妙之处：分散定义，组合使用。

以下是代码举例：

> 我们通过定义功能函数，把两个功能相关的代码各自抽离到一个独立的小函数中，然后通过在setup函数中再把两个小功能函数组合起来，这样一来，我们既可以把setup函数变得清爽，又可以方便维护快速定位功能位置。

--------------------

#### 5.vue3的语法 ####

我之前写过一篇如何使用vue3语法的文章，比较详细，有兴趣的可以点进去看看。

[Vue3新特性和使用方法系统总结\_接着奏乐接着舞。的博客-CSDN博客vue3.0 在20年9.18号更新，随着社区生态逐步完善，支持的组件库也越来越多。总结一下vue3带来一些新的变化，积极拥抱新技术，本文对3.0做了较为全面的总结，如有更新，还会更新此文章 ------2021年.7.13日第一次总结![favicon32.ico][]https://blog.csdn.net/wanghaoyingand/article/details/118694602?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522165184832116782390538034%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request\_id=165184832116782390538034&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2~blog~first\_rank\_ecpm\_v1~rank\_v31\_ecpm-1-118694602-null-null.nonecase&utm\_term=vue3&spm=1018.2226.3001.4450][Vue3_-CSDN_vue3.0 _20_9.18_vue3_3.0_ ------2021_.7.13_favicon32.ico_https_blog.csdn.net_wanghaoyingand_article_details_118694602_ops_request_misc_257B_2522request_255Fid_2522_253A_2522165184832116782390538034_2522_252C_2522scm_2522_253A_252220140713.130102334.pc_255Fblog._2522_257D_request_id_165184832116782390538034_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2_blog_first_rank_ecpm_v1_rank_v31_ecpm-1-118694602-null-null.nonecase_utm_term_vue3_spm_1018.2226.3001.4450]![9f8476d5803f46e6899f3b6e426e38b3.png][]

[icon-default.png_t_M3K6]: https://csdnimg.cn/release/blog_editor_html/release2.1.0/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M3K6
[Vue3 _icon-default.png_t_M3K6_icon-default.png_t_M3K6_https_vue3js.cn_docs_zh]: https://vue3js.cn/docs/zh/
[Vue3 _icon-default.png_t_M3K6_icon-default.png_t_M3K6_https_vue3js.cn_vue-composition]: https://vue3js.cn/vue-composition/
[ant-design-vue]: https://antdv.com/docs/vue/introduce-cn/
[element-plus]: https://element-plus.gitee.io/#/zh-CN
[vant]: https://vant-contrib.gitee.io/vant/v3/#/zh-CN
[VueUse]: https://vueuse.org/
[favicon32.ico]: https://g.csdnimg.cn/static/logo/favicon32.ico
[Vue3_-CSDN_vue3.0 _20_9.18_vue3_3.0_ ------2021_.7.13_favicon32.ico_https_blog.csdn.net_wanghaoyingand_article_details_118694602_ops_request_misc_257B_2522request_255Fid_2522_253A_2522165184832116782390538034_2522_252C_2522scm_2522_253A_252220140713.130102334.pc_255Fblog._2522_257D_request_id_165184832116782390538034_biz_id_0_utm_medium_distribute.pc_search_result.none-task-blog-2_blog_first_rank_ecpm_v1_rank_v31_ecpm-1-118694602-null-null.nonecase_utm_term_vue3_spm_1018.2226.3001.4450]: https://blog.csdn.net/wanghaoyingand/article/details/118694602?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165184832116782390538034%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165184832116782390538034&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-118694602-null-null.nonecase&utm_term=vue3&spm=1018.2226.3001.4450
[9f8476d5803f46e6899f3b6e426e38b3.png]: https://img-blog.csdnimg.cn/9f8476d5803f46e6899f3b6e426e38b3.png