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の実装と最適化

推薦する

ログインフォームを実装するためのReactサンプルコード

Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と rout...

WeChatミニプログラムでEchartとサブパッケージを使用するための完全な手順

序文休日は終わっていますが、それは別の形で(お腹に触れることで)私たちに現れます。ミニプログラムでデ...

SQL 集計、グループ化、並べ替え

目次1. 集計クエリ1. COUNT関数2. SUM関数3. AVG関数4. MAX関数とMIN関数...

WeChatミニプログラムがいいねサービスを実装

この記事では、WeChatアプレットの具体的なコードを参考までに紹介します。具体的な内容は次のとおり...

Linux の who コマンド例の紹介

誰についてシステムにログインしているユーザーを表示します。 who コマンドを実行すると、現在システ...

2列のデータをSQLの新しい列として操作する

以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...

MySQL がテーブルを読み取れないエラー (MySQL 1018 エラー) の解決方法

1. エラーの再現MySQL データベースにはアクセスできますが、データベース テーブルを読み取るこ...

JS を使用してバイナリ ツリー トラバーサル アルゴリズムのサンプル コードを実装する

目次序文1. バイナリツリー1.1. 二分木の走査1.2. jsを使用してバイナリツリーを表現する1...

JQueryセレクターの詳細な説明

目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...

HTML ページでコンテンツの選択、コピー、右クリックを防止する方法の詳細な説明

時には、Web ページに掲載されているコンテンツが悪意のある人物に盗用されるのを望まないため、Web...

React forwardRefの使い方と注意点

これまで react.forwardRef は react の高階コンポーネントには適用できませんで...

MySQL 学習ノート: データ エンジン

現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...

MySQL ユーザーと権限、およびルートパスワードをクラックする方法の例

MySQL ユーザーと権限MySQL には、MySQL と呼ばれるシステムに付属するデータベースがあ...

HTML テーブル マークアップ チュートリアル (1): テーブルの作成

<br />これは 123WORDPRESS.COM が提供する一連のチュートリアルです...

MySQL 5.7.25 のインストールと設定方法のグラフィックチュートリアル

MySQL インストール ファイルには、msi 形式と zip 形式の 2 種類があります。クリック...