デジタル管理プラットフォーム
 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus チュートリアル
 許可システム - モール
 個人ブログアドレス

1. 最初の知り合い

公式説明: 「Composables」は、Vue の結合 API を使用してステートフルロジックをカプセル化して再利用する機能です。

ステートフルロジック
ステートフルロジックは、時間の経過とともに変化する状態を管理します。プロジェクト開発の過程で、タッチジェスチャやデータベース接続ステータスなどの機能の実現。
ステートレスロジックは、
パラメーターを受け取った直後に期待値を返します。これがステートレスロジックです。たとえば、フロントエンドアプリケーションを構築する場合、一部の日付書式設定関数は、別のコンポーネントやスクリプトで再利用するために別の time.js ファイルに抽出されることがよくあります。もちろん、lodash、moment などのステートレスロジックライブラリは多数あります。

ここで、「非レンダリングコンポーネント」の概念について言及する必要があります。これには、コンテンツ自体をレンダリングせず、再利用可能なロジック (データ取得、ページングなど) のみが含まれており、ビューの出力はスコープを通じてコンシューマーコンポーネントに完全に渡されます。スロット。
レンダリングレスコンポーネントで実現できる機能のほとんどは、追加のコンポーネントのネストによるオーバーヘッドを発生させることなく、コンポジション API を介した別のより効率的な方法で実現できます。したがって、純粋なロジックのカプセル化だけの場合 (ビュー出力は必要ありません)、結合された API 実装を使用することをお勧めします。

2. Mixinとの比較

mixin は、コンポーネントロジックを再利用可能なユニットに抽出することもできる Vue2 の API です。ただし、ミックスインには 3 つの主な欠点があります。

不明確なデータの起源
複数のミックスインが使用されている場合、インスタンスのデータプロパティがどのミックスインから来たのかが不明確になり、実装を追跡してコンポーネントの動作を理解することが困難になります。これが、コンポーネントを使用するときに属性のソースを一目で明確にするために、組み合わせた関数で ref + 構造化パターンを使用することをお勧めする理由です。
名前空間の競合
異なる作成者の複数のミックスインが同じプロパティ名を登録し、名前の競合が発生する場合があります。複合関数を使用すると、変数を分割するときに変数の名前を変更することで、同一のキー名を回避できます。
暗黙的なミックスイン間通信
複数のミックスインは相互作用するために共有プロパティ名に依存する必要があるため、それらは暗黙的に結合されます。また、複合関数の戻り値は、通常の関数と同様に、別の複合関数に引数として渡すことができます。
したがって、公式は Vue 3 で mixin を使い続けることを推奨しなくなりました。

3. 柔軟性

コンポーネントの複雑さが増すと、コンポーネントが多すぎてクエリや理解が難しくなる可能性があります。合成 API を使用すると、論理的な懸念に基づいてコンポーネントコードをより小さな関数に分割するための十分な柔軟性が得られます。これにより、コードの編成と再利用が容易になり、コード構造が改善されます。

<script setup>
import { useFeatureA } from './featureA.js'
import { useFeatureB } from './featureB.js'
import { useFeatureC } from './featureC.js'

const { foo, bar } = useFeatureA()
const { baz } = useFeatureB(foo)
const { qux } = useFeatureC(baz)
</script>

4. ケース

コンポーネントでマウスフォローケースを定義する

<script setup>
import { onMounted, onUnmounted, reactive } from 'vue';

// 实现鼠标追踪器效果
const movePosi = reactive({ x: 0, y: 0 })
function MyMouseMove(e) {
    movePosi.x = e.clientX
    movePosi.y = e.clientY
}

onMounted(() => window.addEventListener('mousemove', MyMouseMove))
onUnmounted(() => window.removeEventListener('mousemove', MyMouseMove))
</script>
<template>
    <div class="mouseRender" :style="{ top: movePosi.y + 'px', left: movePosi.x + 'px' }">
        <div>x:{
   
   { movePosi.x }}</div>
        <div>y:{
   
   { movePosi.y }}</div>
    </div>
</template>
<style scoped>
.mouseRender {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
</style>

このロジックを複数のコンポーネントで再利用する場合は、次のように、このロジックを複合関数の形式で外部ファイルに抽出する必要があります。

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

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

import { ref,reactive } from 'vue'
import { useEventListener } from './event'

// 按照惯例，组合式函数以“use”开头
export function useMouse() {
    const movePosi = reactive({ x: 0, y: 0 })

  // 组合式函数可以随时更改其状态。
 useEventListener(window, 'mousemove', (event) => {
    movePosi.x = event.clientX
    movePosi.y = event.clientY
  })
  
   // 通过返回值暴露所管理的状态
   return movePosi 
}

注: 合成関数の規則はキャメルケースで名前が付けられ、「use」で始まります。

コンポーネントの再利用

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

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

<div class="mouseRender" :style="{ top: y + 'px', left: x + 'px' }">
        <div>x:{
   
   { x }}</div>
        <div>y:{
   
   { y }}</div>
    </div>

Vue3 の组合式函数

1. 最初の知り合い

2. Mixinとの比較

3. 柔軟性

4. ケース

おすすめ

Vue3 の 组合式函数

1. 最初の知り合い

2. Mixinとの比較

3. 柔軟性

4. ケース

おすすめ

Vue3 の组合式函数