好记性不如烂笔头——Vue3.0篇
大家好,我是“前端点线面”,一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图(“百题斩”获取《前端百题斩》pdf版;分别回复“go、React、操作系统、Linux、设计模式、j...
·
大家好,我是“前端点线面”,一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图(“百题斩”获取《前端百题斩》pdf版;分别回复“go、React、操作系统、Linux、设计模式、js、webpack、nginx、Redux、Vue”获取对应学习思维导图,一起卷起来)
俗话说的好“好记性不如烂笔头”,今天秉承着后期复习方便的态度,整理了一份Vue3.0基础知识点,并以思维导图的方式呈现出来,方便跟老铁们一起查漏补缺。
![62990f976752f2f94f312d07e61b39b8.png](https://i-blog.csdnimg.cn/blog_migrate/5d5d9f45bb6d97aa2e7bcdf72980040d.png)
一、项目初始化
![8f2290c5f9786e882ed1c9f9ee370735.png](https://i-blog.csdnimg.cn/blog_migrate/6bb9dfd2da7e7b9f97542824ff9fdfab.png)
二、UI层面
![a2e2990af746fc0a60793b7bed597379.png](https://i-blog.csdnimg.cn/blog_migrate/88148f13fd3e52f97a7400d4d325d899.png)
2.1 模板语法
2.1.1 插值
![b1461d9e07186c824c20d7d6fb4a9d75.png](https://i-blog.csdnimg.cn/blog_migrate/3bde990c62bcd00a0a07f2039e63493a.png)
2.1.2 指令
![6c17c3d1ba79a8ace19fddad0f7245c5.png](https://i-blog.csdnimg.cn/blog_migrate/33ad7e732879f9f68a5caaf1acb0c71b.png)
2.2 进阶
2.2.1 样式绑定
![150b320d690e853dbd86e60a981062c7.png](https://i-blog.csdnimg.cn/blog_migrate/eb249db0b31b596a99f9981b849b9616.png)
2.2.2 条件渲染
![14f0b80c13a4096799192020d1d93bc3.png](https://i-blog.csdnimg.cn/blog_migrate/0c85a3b0cbe9c5f3f7607d9e66a94dca.png)
2.2.3 列表渲染
![0a012d83f9cc9fbf78939464dcda0f1b.png](https://i-blog.csdnimg.cn/blog_migrate/02089f7fe34edc324477d755ac133141.png)
2.2.4 事件处理
![a6f90b184adf565e4ebc05b27bd33a43.png](https://i-blog.csdnimg.cn/blog_migrate/c0b33c18876cf5a69ca406ace0607e0e.png)
2.2.5 表单
![600085472be2fb5f1265df97cf3a2a88.png](https://i-blog.csdnimg.cn/blog_migrate/ff590c79b484d92103610d4c0eb9794d.png)
三、组件
![252ad6e7f5df0cdd6a60dac8c97d975c.png](https://i-blog.csdnimg.cn/blog_migrate/8d308b1bd2196d181c64a31e083edd68.png)
3.1 组件注册
![7efcaabb37058b48d64fb6f983168618.png](https://i-blog.csdnimg.cn/blog_migrate/6626e9e2883e36e6ec4b4b48e4118f85.png)
3.2 插槽
![e14ebe4b57b28063e2fa0179ba0328ad.png](https://i-blog.csdnimg.cn/blog_migrate/ac7523133a138af84d635a49b508106c.png)
3.3 动态组件
![eb5e49bab79997022077bd863eaa4c41.png](https://i-blog.csdnimg.cn/blog_migrate/e312c73c7c6fd42d278828c2d8b33c46.png)
3.4 异步组件
![746b30502ab31b842a6b2418996f2b3e.png](https://i-blog.csdnimg.cn/blog_migrate/202e38c51f304cc4bd0aa7e1f2a7c104.png)
四、数据层面
![00a70b5ad780696b41be7f831d500676.png](https://i-blog.csdnimg.cn/blog_migrate/74af9e44d7650bff0dccaff754f9f9a1.png)
4.1 基础数据
![8c0704e84e9ef1ea1976c42ca11c66c6.png](https://i-blog.csdnimg.cn/blog_migrate/79a21e3216e99e00b39b574783c85ca3.png)
4.2 通信层面
![b4dcd56ad8fc120d491482c20d44d8dc.png](https://i-blog.csdnimg.cn/blog_migrate/36df78b872739e6809366ab8aaa8cf63.png)
五、Vue包中关键函数
![4c50406a104427e19f6962b586fd61aa.png](https://i-blog.csdnimg.cn/blog_migrate/d2cb9b660401192b800f7112c1b99dc1.png)
5.1 Vue.createApp(options)
![ceb0504a92b2a5d087f7261bb49b0578.png](https://i-blog.csdnimg.cn/blog_migrate/57606c2da2688a1f0e51f8eae8a918f9.png)
5.1.1 options内容
![a18d4cb36e01abfe9c6c0e0e1f90f618.png](https://i-blog.csdnimg.cn/blog_migrate/a3657af2aadc50d2f74d47a1ad9ce648.png)
5.2 组合式API
![4a4430c21f47bcf45593ce29c19fd415.png](https://i-blog.csdnimg.cn/blog_migrate/a57b54a3231ec37da71f0dbceb68b1bc.png)
5.2.1 为什么使用
![ca5057e256d141f878ed519cb1eaea2a.png](https://i-blog.csdnimg.cn/blog_migrate/9a6d3b5c3a3e343be04bb2adead6319d.png)
5.2.2 基础
![85c795ebcbacc35aaf788b7f3be1da80.png](https://i-blog.csdnimg.cn/blog_migrate/fd5bceeee900b84f2b8b06ed9a8c370b.png)
5.2.2.1 setup
![3bdba523cccf13006f9b07711f3a9ef9.png](https://i-blog.csdnimg.cn/blog_migrate/ca924d859bd50dbe4f9c4e5d0df7ba71.png)
5.2.2.2 ref
![78f7608047442fd30e5a65cded4f375d.png](https://i-blog.csdnimg.cn/blog_migrate/84a364a4f5e717dffce228b7a2007c5d.png)
5.2.2.3 生命周期钩子
![e24870285480bd73f6ca52b0b5106070.png](https://i-blog.csdnimg.cn/blog_migrate/2db36c51f8d13e3858be256e05ce4c36.png)
5.2.2.4 watch响应式更改
![e1cc352231b5483f750fba05d95cd746.png](https://i-blog.csdnimg.cn/blog_migrate/8841fe5d75e009ae346d46d1e55a8253.png)
5.2.2.5 computed
![1f3c532974e36e347bbd23d8be9698c3.png](https://i-blog.csdnimg.cn/blog_migrate/c8403dd531f458a92cc6e068fdbb3c1e.png)
5.2.3 单文件组件<script setup>
![979371b8ebea237631d72b1e24108eaf.png](https://i-blog.csdnimg.cn/blog_migrate/bc644ed7d4020bbba978039d4ca8d593.png)
六、感悟
在整理这些基础知识点的过程中,有以下几点感悟,不一定正确,分享出来与大家探讨:
相比于React,Vue封装的内容是真多,让我需要花大量精力去学习这些API与方法;
从表现层上看,由于自己能力有限,除了其对相关内容进行更好的就会,就不太清楚setup还能帮助我们做什么!
················· 执鸢者简介 ·················
你好,我是执鸢者,毕业于华中科技大学,现在是一名百度前端研发工程师,写有多篇原创文章,分享自己在学习中的点滴收获,近期撰写了《前端百题斩》系列文章(回复“百题斩”获取)、go入门文章,近期在撰写React系列文章,欢迎喜欢的小伙伴领取相关资料。
识别上方二维码加我微信、拉你进交流群
更多推荐
所有评论(0)