Quelle est la méthode de programmation de fonctions combinées dans Vue3-Voir.js-php.cn

Qu'est-ce qu'une fonction composable ?

Dans le concept des applications Vue, "Composables" est une fonction qui utilise l'API composable de Vue pour encapsuler et réutiliser la logique avec état.

Lors de la création d'applications front-end, nous devons souvent réutiliser la logique des tâches courantes. Par exemple, afin de formater l'heure à différents endroits, nous pourrions extraire une fonction de formatage de date réutilisable. Cette fonction encapsule la logique sans état : elle prend certaines entrées et renvoie immédiatement la sortie souhaitée. Il existe de nombreuses bibliothèques qui réutilisent la logique sans état, comme lodash ou date-fns que vous avez peut-être utilisé.

En revanche, la logique avec état est chargée de gérer l'état qui change au fil du temps. Un exemple simple consiste à suivre la position actuelle de la souris sur la page. Dans une application réelle, il peut également s'agir d'une logique plus complexe comme des gestes tactiles ou l'état de connexion à une base de données.

Exemple de suivi de la souris

Si nous devions utiliser l'API de composition directement dans le composant pour implémenter la fonction de suivi de la souris, cela ressemblerait à ceci :

<script setup>
import { ref, onMounted, onUnmounted } from &#39;vue&#39;
const x = ref(0)
const y = ref(0)
function update(event) {
  x.value = event.pageX
  y.value = event.pageY
}
onMounted(() => window.addEventListener(&#39;mousemove&#39;, update))
onUnmounted(() => window.removeEventListener(&#39;mousemove&#39;, update))
</script>
<template>Mouse position is at: {{ x }}, {{ y }}</template>

Copier après la connexion

Mais que se passe-t-il si nous voulons réutiliser cette même logique dans plusieurs composants ? Nous pouvons extraire cette logique dans un fichier externe sous la forme d'une fonction combinée :

// mouse.js
import { ref, onMounted, onUnmounted } from &#39;vue&#39;
// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)
  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener(&#39;mousemove&#39;, update))
  onUnmounted(() => window.removeEventListener(&#39;mousemove&#39;, update))
  // 通过返回值暴露所管理的状态
  return { x, y }
}

Copier après la connexion

Voici comment elle est utilisée dans le composant :

<script setup>
import { useMouse } from &#39;./mouse.js&#39;
const { x, y } = useMouse()
</script>
<template>Mouse position is at: {{ x }}, {{ y }}</template>

Copier après la connexion

Quelle est la méthode de programmation de fonctions combinées dans Vue3

Comme vous pouvez le voir, la logique de base est exactement la même que celle que nous je l'ai simplement déplacé dans une fonction externe et renvoyé l'état qui doit être exposé. Tout comme dans les composants, vous pouvez utiliser toutes les API de composition dans les fonctions de composition. Désormais, la fonctionnalité de useMouse() peut être facilement réutilisée dans n'importe quel composant. useMouse()的功能可以在任何组件中轻易复用了。

更酷的是，你还可以嵌套多个组合式函数：一个组合式函数可以调用一个或多个其他的组合式函数。这使得我们可以像使用多个组件组合成整个应用一样，用多个较小且逻辑独立的单元来组合形成复杂的逻辑。实际上，这正是为什么我们决定将实现了这一设计模式的 API 集合命名为组合式 API。

举例来说，我们可以将添加和清除 DOM 事件监听器的逻辑也封装进一个组合式函数中：

// event.js
import { onMounted, onUnmounted } from &#39;vue&#39;
export function useEventListener(target, event, callback) {
  // 如果你想的话，
  // 也可以用字符串形式的 CSS 选择器来寻找目标 DOM 元素
  onMounted(() => target.addEventListener(event, callback))
  onUnmounted(() => target.removeEventListener(event, callback))
}

Copier après la connexion

有了它，之前的useMouse()组合式函数可以被简化为：

// mouse.js
import { ref } from &#39;vue&#39;
import { useEventListener } from &#39;./event&#39;
export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  useEventListener(window, &#39;mousemove&#39;, (event) => {
    x.value = event.pageX
    y.value = event.pageY
  })
  return { x, y }
}

Copier après la connexion

TIP

每一个调用useMouse()的组件实例会创建其独有的x、y状态拷贝，因此他们不会互相影响。

异步状态示例

useMouse()组合式函数没有接收任何参数，因此让我们再来看一个需要接收一个参数的组合式函数示例。在做异步数据请求时，我们常常需要处理不同的状态：加载中、加载成功和加载失败。

<script setup>
import { ref } from &#39;vue&#39;
const data = ref(null)
const error = ref(null)
fetch(&#39;...&#39;)
  .then((res) => res.json())
  .then((json) => (data.value = json))
  .catch((err) => (error.value = err))
</script>
<template>
  <div v-if="error">Oops! Error encountered: {{ error.message }}</div>
  <div v-else-if="data">
    Data loaded:
    <pre class="brush:php;toolbar:false">{{ data }}

Copier après la connexion

如果在每个需要获取数据的组件中都要重复这种模式，那就太繁琐了。让我们把它抽取成一个组合式函数：

useFetch()接收一个静态的 URL 字符串作为输入，所以它只执行一次请求，然后就完成了。但如果我们想让它在每次 URL 变化时都重新请求呢？那我们可以让它同时允许接收 ref 作为参数：

这个版本的useFetch()现在同时可以接收静态的 URL 字符串和 URL 字符串的 ref。当通过isRef()检测到 URL 是一个动态 ref 时，它会使用watchEffect()启动一个响应式的 effect。该 effect 会立刻执行一次，并在此过程中将 URL 的 ref 作为依赖进行跟踪。当 URL 的 ref 发生改变时，数据就会被重置，并重新请求。

约定和最佳实践

命名

输入参数

尽管其响应性不依赖 ref，组合式函数仍可接收 ref 参数。如果编写的组合式函数会被其他开发者使用，你最好在处理输入参数时兼容 ref 而不只是原始的值。unref()工具函数会对此非常有帮助：

如果你的组合式函数在接收 ref 为参数时会产生响应式 effect，请确保使用watch()显式地监听此 ref，或者在watchEffect()中调用unref()来进行正确的追踪。

返回值

你可能已经注意到了，我们一直在组合式函数中使用ref()而不是reactive()

Nom

Paramètres d'entrée

Valeur de retour

如果你更希望以对象属性的形式来使用组合式函数中返回的状态，你可以将返回的对象用reactive()包装一次，这样其中的 ref 会被自动解包，例如：

副作用

在组合式函数中的确可以执行副作用 (例如：添加 DOM 事件监听器或者请求数据)，但请注意以下规则：

使用限制

组合式函数在<script setup>或setup()钩子中，应始终被同步地调用。在某些场景下，你也可以在像onMounted()这样的生命周期钩子中使用他们。

这个限制是为了让 Vue 能够确定当前正在被执行的到底是哪个组件实例，只有能确认当前组件实例，才能够：

<script setup>是唯一在调用await之后仍可调用组合式函数的地方。编译器会在异步操作之后自动为你恢复当前的组件实例。

通过抽取组合式函数改善代码结构

抽取组合式函数不仅是为了复用，也是为了代码组织。随着组件复杂度的增高，你可能会最终发现组件多得难以查询和理解。组合式 API 会给予你足够的灵活性，让你可以基于逻辑问题将组件代码拆分成更小的函数：

在某种程度上，你可以将这些提取出的组合式函数看作是可以相互通信的组件范围内的服务。

选项式API中使用组合式函数

如果你正在使用选项式 API，组合式函数必须在setup()中调用。且其返回的绑定必须在setup()中返回，以便暴露给this及其模板：

与其他模式的比较

和Mixin的对比

Vue 2 的用户可能会对mixins选项比较熟悉。它也让我们能够把组件逻辑提取到可复用的单元里。然而 mixins 有三个主要的短板：

基于上述理由，我们不再推荐在 Vue 3 中继续使用 mixin。保留该功能只是为了项目迁移的需求和照顾熟悉它的用户。

和无渲染组件的对比

在组件插槽一章中，我们讨论过了基于作用域插槽的无渲染组件。我们甚至用它实现了一样的鼠标追踪器示例。

组合式函数相对于无渲染组件的主要优势是：组合式函数不会产生额外的组件实例开销。当在整个应用中使用时，由无渲染组件产生的额外组件实例会带来无法忽视的性能开销。

我们推荐在纯逻辑复用时使用组合式函数，在需要同时复用逻辑和视图布局时使用无渲染组件。

和React Hooks的对比

如果你有 React 的开发经验，你可能注意到组合式函数和自定义 React hooks 非常相似。组合式 API 的一部分灵感正来自于 React hooks，Vue 的组合式函数也的确在逻辑组合能力上与 React hooks 相近。然而，Vue 的组合式函数是基于 Vue 细粒度的响应性系统，这和 React hooks 的执行模型有本质上的不同。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!