https://amatsuzero.github.io/LastStand/tags/vue3-api/Recent content in Vue3 API on Last StandHugozh-cnWed, 18 Dec 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/Sat, 05 Oct 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/<h2 id="前言">📍前言</h2> <p>最近在一次理解<code>vue</code>项目的代码时，发现周一对好多<code>API</code>都不太熟悉。这间接导致的问题是，代码理解速度要比平常要慢很多。于是乎，赶忙把<code>vue API</code>的学习提上了日程。</p> <p>在下面的文章中，将地板式地扫盲<code>vue3</code>文档中<code>API</code>模块的所有内容，融入周一的理解进行深入介绍。下面就来一起看看吧~🍬</p> <h2 id="一框架搭建">一、🖇框架搭建</h2> <h2 id="1关于文档">1、关于文档</h2> <p>首先附上官方文档的具体材料：<a href="https://cn.vuejs.org/api/">cn.vuejs.org/api/</a></p> <h2 id="2vue3-api整体盘点">2、VUE3 API整体盘点</h2> <p>在<code>vue3</code>的全新<code>API</code>中，有部分在<code>vue2</code>的基础上沿用了。还有另外一部分，是<code>vue3</code>所新增加的。我们先来看<code>vue3 API</code>文档主要包含哪些内容？</p> <p><code>vue3 API</code>主要包含以下六个部分：</p> <ul> <li>全局API —— 全局会用到的API</li> <li>组合式API —— vue3所拥有的组合式API</li> <li>选项式API —— vue2所拥有的选项式API</li> <li>内置内容 —— 指令、组件、特殊元素和特殊属性</li> <li>单文件组件 —— 语法定义、</li> <li>进阶API —— 渲染函数、服务端渲染、TS工具类型和自定义渲染</li> </ul> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/image-01.webp"></p> <p>下面将依据上面提到的六大点内容，来进行相应的剖析和讲解。</p> <h2 id="二全局api">二、🎨全局API</h2> <p>vue3的全局API包含两个部分：应用实例和通用API。那它们各自都有哪些内容呢？</p> <h2 id="1应用实例">1、应用实例</h2> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/image-02.webp"></p> <h2 id="2通用api">2、通用API</h2> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/image-03.webp"></p> <h2 id="三组合式api">三、🚲组合式API</h2> <p>谈到<code>vue3</code> ，相信大家最为熟悉的就是 <code>composition API</code> 了，也就是 <code>组合式 API</code> 。那么，<code>vue3</code> 的 <code>组合式 API</code> 都给我们带来了什么呢？</p> <h2 id="1setup">1、setup</h2> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/image-04.webp"></p> <h2 id="2响应式核心">2、响应式：核心</h2> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/image-05.webp"></p> <h2 id="3响应式工具函数">3、响应式：工具函数</h2> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/image-06.webp"></p> <h2 id="4响应式进阶">4、响应式：进阶</h2> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/image-07.webp"></p> <h2 id="5生命周期钩子">5、生命周期钩子</h2> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/image-08.webp"></p> <h2 id="6依赖注入">6、依赖注入</h2> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/vue/vue3-api/image-09.webp"></p> <h2 id="四选项式api">四、🌠选项式API</h2> <p><code>选项式API</code> 即 <code>options API</code> 。可能有的小伙伴会觉得它在 <code>vue2</code> 项目下会更为常见一些。但在 <code>vue3</code> 项目中，也是有一些 <code>选项式API</code> 值得我们去挖掘的。那都有哪些内容呢，我们来一探究竟。</p>