本文正在参与「金石方案 . 瓜分6万现金大奖」

前语

最近在一次了解vue项目的代码时,发现周一对好多API都不太熟悉。这间接导致的问题是,代码了解速度要比往常要慢很多。于是乎,急忙把vue API的学习提上了日程。

在下面的文章中,将地板式地扫盲vue3文档中API模块的一切内容,融入周一的了解进行深入介绍。下面就来一起看看吧~

一、框架建立

1、关于文档

首先附上官方文档的详细资料:cn.vuejs.org/api/

2、VUE3 API整体盘点

vue3的全新API中,有部分在vue2的基础上沿用了。还有别的一部分,是vue3所新增加的。咱们先来看vue3 API文档首要包含哪些内容?

vue3 API首要包含以下六个部分:

  • 大局API —— 大局会用到的API
  • 组合式API —— vue3所具有的组合式API
  • 选项式API —— vue2所具有的选项式API
  • 内置内容 —— 指令、组件、特别元素和特别特点
  • 单文件组件 —— 语法定义、
  • 进阶API —— 烘托函数、服务端烘托、TS东西类型和自定义烘托

花了一天的时刻,地板式扫盲了vue3一切API盲点

下面将依据上面提到的六大点内容,来进行相应的剖析和解说。

二、大局API

vue3的大局API包含两个部分:运用实例和通用API。那它们各自都有哪些内容呢?

1、运用实例

花了一天的时刻,地板式扫盲了vue3一切API盲点

2、通用API

花了一天的时刻,地板式扫盲了vue3一切API盲点

三、组合式API

谈到vue3 ,信任咱们最为熟悉的便是 composition API 了,也便是 组合式 API 。那么,vue3组合式 API 都给咱们带来了什么呢?

1、setup

花了一天的时刻,地板式扫盲了vue3一切API盲点

2、呼应式:中心

花了一天的时刻,地板式扫盲了vue3一切API盲点

3、呼应式:东西函数

花了一天的时刻,地板式扫盲了vue3一切API盲点

4、呼应式:进阶

花了一天的时刻,地板式扫盲了vue3一切API盲点

5、生命周期钩子

花了一天的时刻,地板式扫盲了vue3一切API盲点

6、依赖注入

花了一天的时刻,地板式扫盲了vue3一切API盲点

四、选项式API

选项式APIoptions API 。可能有的小伙伴会觉得它在 vue2 项目下会更为常见一些。但在 vue3 项目中,也是有一些 选项式API 值得咱们去发掘的。那都有哪些内容呢,咱们来一探终究。

1、状态选项

花了一天的时刻,地板式扫盲了vue3一切API盲点

2、烘托选项

花了一天的时刻,地板式扫盲了vue3一切API盲点

3、生命周期选项

花了一天的时刻,地板式扫盲了vue3一切API盲点

4、组合选项

花了一天的时刻,地板式扫盲了vue3一切API盲点

5、其他杂项

花了一天的时刻,地板式扫盲了vue3一切API盲点

6、组件实例

花了一天的时刻,地板式扫盲了vue3一切API盲点

五、内置内容

vue3 的内置内容包含指令组件特别元素element特别特点attributes。假如要谈在什么场景下会用到内置内容,那周一可能觉得,在一般的 vue 项目开发中,根本都会用到内置内容。较为常见的是用v-if和v-else-if来判别什么时候显示某个组件,什么时候不显示某个组件。

还有像 v-modelv-onv-for 等指令,都是在 vue 项目中十分高频率运用的指令。那 vue3 的内置内容都还有哪些东西呢?请看下方介绍。

1、指令

花了一天的时刻,地板式扫盲了vue3一切API盲点

2、组件

花了一天的时刻,地板式扫盲了vue3一切API盲点

3、特别元素

花了一天的时刻,地板式扫盲了vue3一切API盲点

4、特别特点Attributes

花了一天的时刻,地板式扫盲了vue3一切API盲点

六、单文件组件

关于 vue 来说,信任咱们都会十分熟悉它的组件化思想,好像有一种理念是:万物皆可组件。那关于一个组件来说,咱们都需要了解它的什么内容呢?比如,咱们写的 <template> 是什么,用 <script setup><script lang="ts"> 都分别是什么含义,<style> 用了 scoped 是什么意思,:slotted 插槽选择器又在什么情况下运用呢?咱们一起来一探终究。

1、SFC语法定义

花了一天的时刻,地板式扫盲了vue3一切API盲点

2、单文件组件script setup

花了一天的时刻,地板式扫盲了vue3一切API盲点

3、css功用

花了一天的时刻,地板式扫盲了vue3一切API盲点

七、进阶API

上面咱们了解了 vue3 的基础API,精确来说,上面的 API 能够解决实际工作中 80% 的问题。那下面,咱们就再来看一些较为进阶的 api 操作。下面所涉及到的这些 API ,更多的是能够在某些定制化的场景下,做一些高阶的操作。比如:咱们能够在一个 headless 组件里,用 renderh() 函数,来烘托自定义的页面。那 进阶 API 都还有哪些东西呢,来看下面的内容。

1、烘托函数

花了一天的时刻,地板式扫盲了vue3一切API盲点

2、服务端烘托

花了一天的时刻,地板式扫盲了vue3一切API盲点

3、TypeScript东西类型

花了一天的时刻,地板式扫盲了vue3一切API盲点

4、自定义烘托

花了一天的时刻,地板式扫盲了vue3一切API盲点

八、结束语

到这里,咱们也就讲完了 vue3 API 一切的常识点。个人认为,原理常识的学习,是为了更好的将其运用到项目中。所以在学完以上内容后,不妨能够进一步将其运用到项目里,总结出工作中的最佳实践。

文章依据周一的了解做了一些输出,有观念不当之处欢迎交流~

彩蛋 One More Thing

思维导图github地址:github.com/Jacqueline7…

vue3 入门指南文章推荐:焕然一新的 Vue 3 中文文档要来了

以上便是本文的全部内容,咱们下期见!