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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
ストアド関数ストアド関数とは: SQL コードの一部をカプセル化し、特定の関数を完了して、結果を返し...
CSS3 はアニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメ...
今日もまた罠に落ちてしまいました。 私は以前MySQLの主キーオーバーフローに遭遇したことがあり、そ...
MySQL 起動エラーWindows 10 に MySQL をインストールする前は、net star...
目次1. 参照と反応1. 反応的2.参照2. shallowRef と shallowReactiv...
序文SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのように...
前回のエピソードレビュー:昨日は、ページがさまざまなデバイス サイズにどのように対応するかについて説...
Navicat がエクスポートしたデータはインポートできません。最後に、MySQLコマンドのインポー...
目次1. カスタム指示1. グローバルカスタム指示を登録する2. グローバルカスタム指示を使用する3...
まず、setIntervalはフックとしてカプセル化されます👇 'react' から...
目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...
結果:実装コードhtml <nav class="dropdownmenu"...
今日は IE8 ベータ 1 (以下、IE8 と略します) をチラ見しました。IE8 は素晴らしい体験...
1. はじめにMySQL にはレプリケーション ソリューションが付属しており、次のような利点がありま...