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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3における効果と計算値の密接な関係についての簡単な説明

<<:  Linux DHCPサービスの詳細な説明

>>:  MySqlサブクエリINの実装と最適化

推薦する

MySQL ストアド関数(カスタム関数)の定義と使用方法の詳細な説明

ストアド関数ストアド関数とは: SQL コードの一部をカプセル化し、特定の関数を完了して、結果を返し...

CSS3 アニメーション ボールローリング JS コントロールアニメーション一時停止

CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...

MySQL テーブルにおける非主キー列オーバーフロー監視の詳細な説明

今日もまた罠に落ちてしまいました。 私は以前MySQLの主キーオーバーフローに遭遇したことがあり、そ...

Windows システムで MySQL が起動しない場合の一般的な解決策

MySQL 起動エラーWindows 10 に MySQL をインストールする前は、net star...

Vue3 における ref と reactive の詳細な説明と拡張

目次1. 参照と反応1. 反応的2.参照2. shallowRef と shallowReactiv...

SpringBoot + Vue プロジェクトを Linux サーバーにデプロイするための詳細なチュートリアル

序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...

レスポンシブWebデザイン学習(2) — 動画をレスポンシブにすることはできるのか?

前回のエピソードレビュー:昨日は、ページがさまざまなデバイス サイズにどのように対応するかについて説...

NavicatでMySQLビッグデータをインポートする際のエラーの解決方法

Navicat がエクスポートしたデータはインポートできません。最後に、MySQLコマンドのインポー...

Vue 3.0 カスタムディレクティブの使い方

目次1. カスタム指示1. グローバルカスタム指示を登録する2. グローバルカスタム指示を使用する3...

React+Typescriptはカウントダウンフックメソッドを実装します

まず、setIntervalはフックとしてカプセル化されます👇 'react' から...

WindowsでのMySQLインストールチュートリアルの詳細な紹介

目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...

CSS3で実装された水平ヘッダーメニュー

結果:実装コードhtml <nav class="dropdownmenu"...

IE8は優れたエクスペリエンスを提供します: アクティビティ

今日は IE8 ベータ 1 (以下、IE8 と略します) をチラ見しました。IE8 は素晴らしい体験...

MySQLのレプリケーションとチューニングの原則と方法を分析する

1. はじめにMySQL にはレプリケーション ソリューションが付属しており、次のような利点がありま...