Vue3 における computed の新しい使用例のまとめ

vue3 での computed の使い方。vue3 は vue2 のオプション API と互換性があるため、vue2 の記述方法を直接使用できます。この記事では、主に vue3 での computed の新しい使い方を紹介し、vue2 での記述方法と比較することで、vue3 での computed の新しい使い方をすぐに習得できるようにします。

結合された API で computed を使用する場合は、最初にそれをインポートする必要があります: import { computed } from "vue"。導入後、computed に渡すことができるパラメーターには、コールバック関数とオプションの 2 種類があります。どのように使用されるかを詳しく見てみましょう。

1. 機能的な文章

vue2 では、computed は次のように記述されます。

計算:{
 和（）{
  this.num1+ this.num2 を返す
 }
}

vue3ではオプションAPIを使う場合はこのように書くこともできます。主に組み合わせたAPIの使い方を見ていきます。

例1: 合計

「vue」から{ref、computed}をインポートします。
エクスポートデフォルト{
 設定（）{
  定数num1 = ref(1)
  定数num2 = ref(1)
  合計を計算(()=>{
   num1.value + num2.value を返す
  })
 }
}

computed が呼び出されると、矢印関数が渡され、戻り値が合計として使用されます。以前よりも使いやすくなりました。複数の属性値を計算する必要がある場合は、直接呼び出してください。のように：

合計を計算(()=>{
 num1.value + num2.value を返す
 })
mul = computed(()=>{とする
 num1.value * num2.value を返す
 })

この例は単純すぎます。理解できない場合は、記事の最後にある完全な例 1 を読んでください。

2. オプションの書き方

計算プロパティにはデフォルトではゲッターのみがありますが、必要に応じてセッターも提供できます。 vue2 での使用方法は次のとおりです。

計算:{
 マルチ:{
  get(){ // num1 の値が変わったときにトリガーされる return this.num1 * 10
  },
  set(value){ // mul 値が変更されたときにトリガーされます this.num1 = value /10
  }
 }
}

mul 属性は num1 を 10 倍にします。mul の値が変更されると、num1 もそれに応じて変更されます。

vue3の場合:

mul = 計算({
 取得:()=>{
  num1.value *10 を返す
 },
 設定:(値)=>{
  num1.value = value/10 を返します。
 }
})

これら 2 つの書き方は完全に同じではありませんが、よく見ると大きな違いはなく、get および set 呼び出しも同じであることがわかります。

この例のコードはシンプルです。よくわからない場合は、記事の最後にある完全な例 2 を確認してください。

完全な例1:

<テンプレート>
 <div>
  {{num1}} + {{num2}} = {{合計}}
  <br>
  <button @click="num1++">num1 自己増分</button>
  <button @click="num2++">num2 自己増分</button>
 </div>
</テンプレート>
<スクリプト>
「vue」から{ref、computed}をインポートします。
エクスポートデフォルト{
 設定（）{
  定数num1 = ref(1)
  定数num2 = ref(1)
  合計を計算(()=>{
   num1.value + num2.value を返す
  })
  戻る {
   数値1、
   数値2、
   和
  }
 }
}
</スクリプト>

完全な例2:

<テンプレート>
 <div>
  {{num1}} + {{num2}} = {{合計} です。
  <button @click="num1++">num1 自己増分</button>
  <button @click="num2++">num2 自己増分</button>
  <br>
  {{num1}} * 10 = {{mul}}
  <button @click="mul=100">値を変更</button>
 </div>
</テンプレート>
<スクリプト>
「vue」から{ref、computed}をインポートします。
エクスポートデフォルト{
 設定（）{
  定数num1 = ref(1)
  定数num2 = ref(1)

  合計を計算(()=>{
   num1.value + num2.value を返す
  })
  mul = 計算される({
   取得:()=>{
    num1.value *10 を返す
   },
   設定:(値)=>{
    num1.value = value/10 を返します。
   }
  })
  戻る {
   数値1、
   数値2、
   和、
   マル
  }
 }
}
</スクリプト>

3. 計算されたパラメータの受け渡し

プロパティを計算するときにパラメータを記述するにはどうすればよいですか?

<テンプレート>
 <div>
  <div v-for="(item,index) in arr" :key="index" @click="sltEle(index)">
   {{アイテム}}
  </div>
 </div>
</テンプレート>
<スクリプト>
「vue」から{ref、computed、reactive}をインポートします。
エクスポートデフォルト{
 設定（）{
  定数 arr = リアクティブ([
   「ははは」「へへ」
  ])
  const sltEle = 計算された( (インデックス)=>{
   console.log('インデックス',インデックス);  
  })
  戻る {
   arr、sltEle
  }
 }
}
</スクリプト>

このように直接記述すると、実行時にエラーが発生します: Uncaught TypeError: $setup.sltEle is not a function.

理由：

計算プロパティには戻り値が指定されていません。関数を呼び出しましたが、計算プロパティは関数を返さないため、エラーが報告されます: sltEle は関数ではありません。

解決：

計算プロパティ内で関数を返す必要があります。コードを次のように変更します。

const sltEle = 計算された( ()=>{
 関数(インデックス)を返す{
  console.log('インデックス',インデックス);
 }
})

これで、vue3 での computed の新しい使用法に関するこの記事は終了です。vue3 の computed の使用法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: