[Vue3] ¿Qué es la API combinada en Vue3? ¿Qué son los ganchos? ¿Qué es una "función combinada"? ¿Cómo utilizar la función de enlace personalizado en el proyecto?

1. ¿Qué es una API combinada? (composición-api)

Composition API (API de composición) es una colección de API que nos permiten escribir componentes de Vue usando funciones en lugar de declarar opciones . Es un término general que incluye principalmente tres tipos de API:

• API reactivas : como ref() y reactiva(), nos permiten crear directamente estados reactivos, propiedades calculadas y oyentes.
• Ganchos del ciclo de vida : como onMounted() y onUnmounted(), nos permiten agregar lógica en varias etapas del ciclo de vida de los componentes.
• Inyección de dependencia : como provide() e inject(), nos permiten aprovechar el sistema de inyección de dependencia de Vue cuando usamos API reactivas.

En Vue 3, la API de composición básicamente funcionará con

<script setup>
import {
      
       ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 更改状态、触发更新的函数
function increment() {
      
      
  count.value++
}

// 生命周期钩子
onMounted(() => {
      
      
  console.log(`计数器初始值为 ${ 
        count.value}。`)
})
</script>

<template>
  <button @click="increment">点击了：{
   
   { count }} 次</button>
</template>

Aviso: Aunque el estilo de la API de composición se basa en la composición de funciones, la API de composición no es programación funcional . Las API de composición se basan en el sistema de respuesta mutable y detallado de Vue, mientras que la programación funcional generalmente enfatiza los datos inmutables.

2. ¿Qué es una función combinada? (gancho)

La función combinada (Composables) es un uso de Vue 组合式 APIpara encapsular y reutilizar 有状态逻辑的函数. Al igual que en los componentes, también puedes utilizar todas las API de composición en funciones de composición.

2.1 Funciones sin estado (utils)

Al crear aplicaciones front-end, a menudo necesitamos reutilizar la lógica para tareas comunes. Por ejemplo, podríamos extraer una función de formato de fecha reutilizable para formatear la hora en diferentes lugares. Esta función encapsula 无状态的逻辑: devuelve la salida deseada inmediatamente después de recibir alguna entrada.

Por ejemplo:

2.2 Funciones con estado (ganchos)

Por el contrario, las funciones con lógica con estado gestionan estados que cambian con el tiempo.
Un ejemplo sencillo es el seguimiento de la posición actual del ratón en la página.
En la práctica, también podría tratarse de una lógica más compleja, como gestos táctiles o el estado de una conexión a una base de datos.

2.3 La conexión y diferencia entre utilidades y ganchos.

conectar

En términos generales, durante nuestro desarrollo, abstraeremos automáticamente las funciones lógicas y las colocaremos utils. utilsLa lógica pura colocada en no existe como componente,
sino hooksque utilsenvuelve una capa de elementos a nivel de componente (funciones de enlace, etc.) en el base de .

la diferencia

hooksSi se trata de refestos datos reactive, entonces estos datos responden, pero simplemente extraer métodos públicos no tiene capacidad de respuesta.computedapi
utils

Resumir

hookLa esencia de es una función con estado que encapsula setuplo utilizado en la función . Similar Composition APIa eso en vue2.x.mixin

Ventaja

Reutilice el código para que setupla lógica sea más clara y fácil de entender.

3. ¿Cómo utilizar la función de enlace personalizado en el proyecto?

1. Crear carpeta srcenhooks
2. Cree un archivo en hooksla carpeta usexxx.js(generalmente comienza con use-)
3. usexxx.jsEncapsular la función y exponerla .
4. Recuerde devolver las propiedades que se utilizarán al final de la función.
5. Finalmente, impórtalo en el componente y podrás usarlo.
   

ejemplo de rastreador de mouse

1. Cree useMouse.js en el directorio de ganchos

// mouse.js
import {
    
     ref, onMounted, onUnmounted } from 'vue'

// 按照惯例，组合式函数名以“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('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  // 通过返回值暴露所管理的状态
  return {
    
     x, y }
}

2. Utilizado en componentes del proyecto.

<script setup>
import {
      
       useMouse } from './mouse.js';

const {
      
       x, y } = useMouse();
</script>

<template>Mouse position is at: {
   
   { x }}, {
   
   { y }}</template>

https://juejin.cn/post/7208111879150993464
https://juejin.cn/post/7083401842733875208