【Vue3】Vue3の複合APIとは何ですか？フックとは何ですか? 「複合関数」とは何ですか? プロジェクトでカスタムフック関数を使用するにはどうすればよいですか?

複合 API とフック

1. 結合 API とは何ですか? (構成-API)

Comboposition API (Composition API) は、options を宣言する代わりに関数を使用してVue コンポーネントを作成できるようにする API のコレクションです。これは、主に次の 3 種類の API を含む包括的な用語です。

リアクティブ API : ref() や reactive() など、リアクティブな状態、計算されたプロパティ、およびリスナーを直接作成できます。
ライフサイクルフック: onMounted() や onUnmounted() などを使用すると、コンポーネントのさまざまなライフサイクル段階でロジックを追加できます。
依存関係注入: Provide() や inject() など、リアクティブ API を使用するときに Vue の依存関係注入システムを利用できるようにします。

複合API
Vue 3 では、コンポジション API は基本的に

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

知らせ: 合成 API スタイルは関数合成に基づいていますが、合成 API は関数型プログラミングではありません。コンポジション API は Vue の変更可能できめ細かい応答システムに基づいていますが、関数型プログラミングでは通常、不変データが重視されます。

2. 複合機能とは何ですか? （針）

組み合わせ機能(Composables) は、Vue を使用して组合式 APIカプセル化して再利用します有状态逻辑的函数。コンポーネントと同様に、合成関数でもすべての合成 API を使用できます。

2.1 ステートレス関数 (utils)

フロントエンドアプリケーションを構築するとき、多くの場合、一般的なタスクのロジックを再利用する必要があります。たとえば、さまざまな場所で時刻を書式設定するために、再利用可能な日付書式設定関数を抽出できます。この関数はカプセル化します无状态的逻辑。入力を受け取った直後に必要な出力を返します。

例えば：
ここに画像の説明を挿入

2.2 ステートフル関数 (フック)

対照的に、ステートフルロジックを備えた関数は、時間の経過とともに変化する状態を管理します。
簡単な例としては、ページ内の現在のマウス位置を追跡することが挙げられます。
実際には、タッチジェスチャやデータベースへの接続ステータスなど、より複雑なロジックである可能性もあります。

2.3 ユーティリティとフックの関係と違い

接続する

一般的に、私たちの開発では、ロジック関数を自動的に抽象化してに配置しますutils。utilsの純粋なロジックにはコンポーネントはありません。に基づいて、コンポーネントレベルのもの (フック関数など) の別の層があります
。hooksutils

違い

hooksref、、reactiveこれらcomputedのデータが含まれる場合api、これらのデータは応答性があります
が、utils単にパブリックメソッドを抽出するだけでは応答性がありません。

要約する

hookの本質は、関数で使用されるをカプセル化するステートフル関数です。vue2.x の場合と同様です。setupComposition APImixin

アドバンテージ

コードを再利用すると、setupロジックがより明確になり、理解しやすくなります。

3. プロジェクトでカスタムフック機能を使用するにはどうすればよいですか?

src以下にhooksフォルダーを作成
hooksフォルダー内にファイルを作成しますusexxx.js(通常は use- で始まります)
usexxx.js関数をカプセル化して公開する
関数の最後に使用するプロパティを忘れずに返してください。
最後に、それをコンポーネントにインポートすると、使用できるようになります

マウストラッカーの例

useMouse.js をフックディレクトリに作成します

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

プロジェクトコンポーネントで使用される

<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