[Vue3] Qual é a API combinada no Vue3? O que são ganchos? O que é uma “função combinada”? Como usar a função de gancho personalizado no projeto?

1. O que é uma API combinada? (composição-api)

API de composição (API de composição) é uma coleção de APIs que nos permite escrever componentes Vue usando funções em vez de declarar opções . É um termo abrangente que inclui principalmente três tipos de APIs:

• APIs reativas : como ref() e reactive(), nos permitem criar diretamente estado reativo, propriedades computadas e ouvintes.
• Ganchos de ciclo de vida : como onMounted() e onUnmounted(), nos permitem adicionar lógica em vários estágios do ciclo de vida dos componentes.
• Injeção de dependência : como provide() e inject(), nos permitem aproveitar as vantagens do sistema de injeção de dependência do Vue ao usar APIs reativas.

No Vue 3, a API de composição funcionará basicamente com

<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>

Perceber: Embora o estilo da API composicional seja baseado na composição de funções, a API composicional não é uma programação funcional . As APIs de composição são baseadas no sistema mutável e responsivo refinado do Vue, enquanto a programação funcional normalmente enfatiza dados imutáveis.

2. O que é uma função combinada? (gancho)

A função de combinação (Composables) é um uso do Vue 组合式 APIpara encapsular e reutilizar 有状态逻辑的函数. Assim como nos componentes, você também pode usar todas as APIs de composição em funções de composição.

2.1 Funções sem estado (utils)

Ao construir aplicações front-end, muitas vezes precisamos reutilizar a lógica para tarefas comuns. Por exemplo, podemos extrair uma função de formatação de data reutilizável para formatar a hora em locais diferentes. Esta função encapsula 无状态的逻辑: ela retorna a saída desejada imediatamente após receber alguma entrada.

Por exemplo:

2.2 Funções com estado (ganchos)

Em contraste, funções com lógica stateful gerenciam estados que mudam com o tempo.
Um exemplo simples é rastrear a posição atual do mouse na página.
Na prática, também poderia ser uma lógica mais complexa, como gestos de toque ou o estado de uma conexão com um banco de dados.

2.3 A conexão e diferença entre utilitários e ganchos

conectar

De modo geral, durante nosso desenvolvimento, abstrairemos automaticamente funções lógicas e as colocaremos utilsem . utilsA lógica pura colocada em , não existe como componentes;
e hooksé para utilsenvolver uma camada de coisas em nível de componente (funções de gancho, etc.) no base de .

a diferença

hooksSe envolver refesses dados reactive, então esses dados são responsivos, mas simplesmente extrair métodos públicos não tem capacidade de resposta,computedapi
utils

Resumir

hookA essência de é uma função com estado que encapsula setupo usado na função . Semelhante Composition APIao vue2.x.mixin

Vantagem

Reutilize o código para tornar setupa lógica mais clara e fácil de entender.

3. Como usar a função de gancho personalizado no projeto?

1. Crie uma pasta srcemhooks
2. Crie um arquivo na hookspasta usexxx.js(geralmente comece com use-)
3. usexxx.jsEncapsular a função e expô -la
4. Lembre-se de retornar as propriedades a serem utilizadas no final da função
5. Por fim, importe-o no componente e você poderá usá-lo
   

exemplo de rastreador de mouse

1. Crie useMouse.js no diretório hooks

// 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. Usado em componentes do projeto

<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