Vue3のコンポジションAPIとは何ですか?

まず、Composition API とは何かを理解しましょう。実際、Composition API は Vue コードを編成する方法です。従来の Vue では、コンポーネントのコードは通常、巨大なコードで構成されていることがわかっています。

では、Composition API の利点は何でしょうか? まず、よりクリーンなコードを作成できるようになります。コンポーネント内で多数のメソッドや計算されたプロパティを定義する必要はなく、これらのロジックを小さな関数に分割して、コードをより読みやすく理解しやすくすることができます。次に、Composition API はコードの重複を避けるのに役立ちます。いくつかの共通ロジックを抽出し、複数のコンポーネント間で共有できます。これにより、コードの重複を回避し、開発効率を向上させることができます。

次に、Composition API の使用例をいくつか見てみましょう。

最初の例は、単純な計算プロパティです。従来の Vue では、計算されたプロパティで計算結果を返す必要があります。Comboposition API では、単純な関数を使用してこの機能を実現できます。

<template>  
  <div>  
    <p>姓名：{
   
   { fullName }}</p>  
  </div>  
</template>  
  
<script>  
import {
      
       computed } from 'vue';  
  
export default {
      
        
  setup() {
      
        
    const fullName = computed(() => {
      
        
      const firstName = '张三'; // 假设这是从父组件传递下来的数据  
      const lastName = '李四'; // 假设这是从父组件传递下来的数据  
      return `${ 
        firstName} ${ 
        lastName}`;  
    });  
  
    return {
      
        
      fullName,  
    };  
  },  
};  
</script>

上の例では、計算関数を使用して計算プロパティ fullName を定義しました。この計算されたプロパティは、親コンポーネントから渡された 2 つの変数 firstName と lastName を含む文字列を返します。次に、テンプレート内で { { fullName }} を使用して、この計算されたプロパティの結果を表示します。こうすることで、firstName または lastName の値が変更されるたびに、fullName が自動的に更新されます。

2 番目の例は、単純なライフサイクルフック関数です。従来の Vue では、コンポーネント内で一連のライフサイクルフック関数を定義する必要があります。Comboposition API では、単純な関数を使用してこの機能を実現できます。

<template>  
  <div>  
    <p>计数器：{
   
   { count }}</p>  
    <button @click="increment">增加</button>  
  </div>  
</template>  
  
<script>  
import {
      
       onMounted } from 'vue';  
  
export default {
      
        
  setup() {
      
        
    let count = 0; // 假设这是从父组件传递下来的数据  
  
    onMounted(() => {
      
        
      console.log('组件已挂载');  
    });  
  
    const increment = () => {
      
        
      count++;  
    };  
  
    return {
      
        
      count,  
      increment,  
    };  
  },  
};  
</script>

上の例では、onMounted 関数を使用してライフサイクルフック関数を定義しました。この関数はコンポーネントがマウントされた後に実行され、コンソールにメッセージを出力します。次に、テンプレート内のカウンターとボタンを使用して、このコンポーネントの機能を示します。ユーザーがボタンをクリックすると、カウンターの値が増加します。このようにして、テンプレート内で複雑な計算プロパティとライフサイクルフック関数を使用することを回避できます。

3 番目の例は非同期操作です。従来の Vue では、非同期操作を処理するには async/await または Promise を使用する必要があります。Comboposition API では、ref 関数と計算関数を使用してこの機能を実現できます。

<template>  
  <div>  
    <p>当前时间：{
   
   { currentTime }}</p>  
    <button @click="fetchCurrentTime">获取当前时间</button>  
  </div>  
</template>  
  
<script>  
import {
      
       ref, computed } from 'vue';  
  
export default {
      
        
  setup() {
      
        
    const currentTimeRef = ref(null);  
  
    const fetchCurrentTime = () => {
      
        
      currentTimeRef.value = fetchCurrentTimeFromServer().then(currentTime => {
      
        
        currentTimeRef.value = currentTime;  
      });  
    };  
  
    const currentTime = computed(() => {
      
        
      return currentTimeRef.value;  
    });  
  
    return {
      
        
      currentTime,  
      fetchCurrentTime,  
    };  
  },  
};  
</script>

上の例では、ref 関数を使用して、現在の時刻を保存するための参照 currentTimeRef を定義します。次に、サーバーから現在時刻を取得する非同期関数 fetchCurrentTimeFromServer を定義しました。fetchCurrentTime 関数では、fetchCurrentTimeFromServer 関数を呼び出し、結果を currentTimeRef に保存します。最後に、計算関数を使用して計算プロパティ currentTime を定義し、現在の currentTimeRef 値を返します。このようにして、currentTimeRef の値が変更されるたびに、currentTime が自動的に更新されます。ユーザーが「Get Current Time」ボタンをクリックすると、fetchCurrentTime 関数を呼び出して現在時刻を取得し、currentTimeRef の値を更新します。すると、テンプレート内の { { currentTime }} が最新の現在時刻に自動的に更新されます。

Vue3のコンポジションAPIとは何ですか?

おすすめ