利用一个例子讲解Vue组合式API

发布时间：2023-10-19 12:34:53 所属栏目：语言来源：

导读：当我们编写Vue组件时候，组件中可能包含一系列的功能，例如一个代码仓库管理的应用，用户的仓库列表可以看做是一个组件，这个组件还包含筛选、搜索的功能。

所谓的功能我们可以理解为MVC中的Model和Controller。从

当我们编写Vue组件时候，组件中可能包含一系列的功能，例如一个代码仓库管理的应用，用户的仓库列表可以看做是一个组件，这个组件还包含筛选、搜索的功能。

所谓的功能我们可以理解为MVC中的Model和Controller。从视图角度，组件是最基本的代码复用单元，但是从逻辑上，功能模块是最基本的代码复用单元。

每个组件中可能包含多个功能（也称为关注点），而多个功能的代码会分散在Vue组件的各个部分：data/props/watch/computed/dom event callback/lifescycle。

这会带来两个问题：

可读性和可维护性差，比如我们想要阅读某个功能的逻辑，需要翻遍整个组件，到处查看相应的逻辑；当需要改动某个功能时候，需要在很多地方进行改动。
Vue未提供功能模块级别的代码复用支持，只提供组件级别的复用的话，在大型项目中是不够的。
为了解决上面两个问题，Vue需要提供功能模块级别的代码组织方式，即需要将同一个功能模块的代码写在同一片区域，而不是分散到组件的各个API中，另外还需要支持功能模块的封装，以便我们可以提取功能模块的代码进行复用。

如何实现上述两个能力呢？我们看看一个功能模块都包含哪些内容。

数据
数据的计算
数据的更新
数据监听
其中数据部分的代码写在Vue组件中的data、props中

数据计算部分的代码写在Vue组件中的computed和处理数据的方法中

数据更新部分代码写在生命周期钩子方法和交互事件中

数据监听代码写在watch中

因此我们希望Vue能提供一个API，让我们把一个功能模块（即关注点）的这些代码（包括data/props/computed/watch/dom event callback/lifecycle）都写在一起。并且能将其提取。

组合式API就提供了这样的能力。

总之，组合式API是在Vue3中新增加的API，它有两点优势：

让功能模块代码（关注点）聚合在一起，使可读性和可维护性更高。
提供了一种功能模块级别的复用代码的方式。
二、Composition API使用
前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。

开发者如何使用组合式API呢？简单地说，需要在Vue组件里实现setup方法，并在方法中返回一些方法和属性，返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

（编辑：马鞍山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!