一、vue3介绍
vue3.0是在2.0的基础上重大优化调整后的升级版本，其响应式原理已经在vue2框架基础中介绍过，此文章重点介绍Vue 3 中一些新功能API及其使用，文章内容来源于Vue3API。包括：
- 组合式 API
- Emits 组件选项
- 单文件组件组合式 API 语法糖 (
<script setup></code>)</li><li>单文件组件状态驱动的 CSS 变量 (<code><style></code> 中的 <code>v-bind</code>)</li><li>SFC <code><style scoped></code> 现在可以包含全局规则或只针对插槽内容的规则</li></ul><p><strong>二、组合式 API</strong></p><p>通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段，可以大大提高应用可维护性和灵活性。然而经验证明，光靠这一点可能并不够，处理大型应用时，共享和重用代码变得尤为重要。假设我们的应用中有一个显示某个列表的视图。此外，我们还希望有搜索和筛选功能。在vue2中使用 (<code>data</code>、<code>computed</code>、<code>methods</code>、<code>watch</code>) 组件选项来组织逻辑通常都很有效，但是当我们的组件开始变得更大时，同一Vue页面的逻辑关注点也会增多，对于没有编写这些组件的人来说，这会导致组件难以阅读和理解。如果能够将同一个逻辑关注点相关代码收集在一起将能使开发人员更容易阅读和理解，这就是组合式 API 的设计思想。</p><p>如何使用组合式API? 这里需要使用vue3的一个组件选项setup，<code>setup</code> 选项是一个接收 <code>props</code> 和 <code>context</code> 的函数，setup() 函数在组件创建 created() 之前执行。<code>setup</code> 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。我们将在vue2中<code>data</code>、<code>computed</code>、<code>methods</code>、<code>watch组件选项中书写的代码全部集中到setup函数中去，然后把需要给外部使用的变量或函数通过返回值方式返回，这就是vue3的组合api思想。例如如下：</code></p><p><strong>三、应用配置</strong></p><p>每个 Vue 应用都会暴露一个包含其配置项的 <code>config</code> 对象，在挂载应用之前，你可以修改下列 property，代码示例如下：</p><p><strong>四、应用API</strong></p><p>在 Vue 3 中，全局改变 Vue 行为的 API 现在被移动到了由新的 <code>createApp</code> 方法所创建的应用实例上，现在它们的影响仅限于该特定应用实例。调用 <code>createApp</code> 返回一个应用实例。该实例提供了一个应用上下文。应用实例挂载的整个组件树共享相同的上下文，该上下文提供了之前在 Vue 2.x 中的"全局"配置。由于 <code>createApp</code> 方法返回应用实例本身，因此可以在其后链式调用其它方法，这些方法如下：</p><p><strong>五、全局API</strong></p><p>如果你使用的是 CDN 构建版本，那么全局 API 可以通过全局对象 <code>Vue</code> 来访问，使用方式举例如下：</p><p><strong>六、选项式 API</strong></p><p><strong>七、生命周期钩子</strong></p><p>所有生命周期钩子的 <code>this</code> 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 <code>created: () => this.fetchTodos()</code>)。因为箭头函数绑定了父级上下文，所以 <code>this</code> 不会指向预期的组件实例，并且<code>this.fetchTodos</code> 将会是 undefined。</p><p><strong>八、单文件组件</strong></p><p class="node-read-div2p"><code>*.vue</code> 文件是使用类 HTML 语法来描述 Vue 组件的一种自定义文件格式。每一个 <code>*.vue</code> 文件都由三种类型的顶层语法块所组成：<code><template>、<code><script></code>、<code><style></code> 以及可选的附加自定义块。常用规范说明如下：</p></script>
Original: https://www.cnblogs.com/zqhIndex/p/16496272.html
Author: 我若安好，便是晴天
Title: Vue3新特性API
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/612419/
转载文章受原作者版权保护。转载请注明原作者出处！