Vue3 の組み合わせ API における setup、ref、reactive の完全な使用方法

Vue3 の組み合わせ API における setup、ref、reactive の完全な使用方法

1. セットアップを始める

次のコード関数を簡単に紹介します。
ref 関数を使用して変数の変更を監視し、それをビューにレンダリングします。
setUp 関数は、結合された API のエントリ関数です。これはとても重要です。
setUp は変数の変更を監視できます。私たちはそれを使用します
ref は vue に組み込まれており、インポートする必要があります。

<テンプレート>
 <div>{{ countNum} } } }
 <button @click="handerFunc">ボタン</button>
</テンプレート>
<スクリプト>
'vue' から {ref} をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
  設定() {
    // この文は、変数 count が定義されていることを意味します。この変数の初期値は100です
    countNum = ref(100)とします。

    // 結合された API では、メソッドを定義する場合、メソッド内で定義する必要はありません。関数handerFunc(){を直接定義するだけです
      // console.log(countNum); //countNum はオブジェクトです countNum.value += 10;
    }
    // 結合された API で定義されたメソッドまたは変数。外部で必要な場合は、return {aaa,func} return {countNum,handerFunc} を通じて公開する必要があります。
  }
}
</スクリプト> 

2. リアクティブの使用を理解する

ref 関数は、単純な型のデータの変更のみを監視できます。
複合型 (配列、オブジェクト) の変更を監視することはできません。
そこで反応的な主人公が登場します。
セットアップ内の機能は自動的に 1 回実行されます。

<テンプレート>
 <div>
   <ul>
     <li v-for="satte.arr内のアイテム" :key="item.id">
       {{item.name}}
     </li>
   </ul>

 </div>
</テンプレート>
<スクリプト>
'vue' から {reactive} をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
  設定(){
    console.log("setUp は自動的に実行されます")
    // ref 関数に関する注意:
    // ref 関数は単純なデータ型のみを監視でき、複雑なデータ型 (配列、オブジェクト) は監視できません。
    // リアクティブメソッドにはオブジェクトが含まれています let satte=reactive({
       編曲:[
         {name:"Si Teng",id:'0011'},
         {name:"アンダー・ザ・スキン",id:'0011'},
         {name:"百年の約束",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    返す { satte }
  },
}
</スクリプト>

3. リアクティブを使用する

ビューの削除

<テンプレート>
 <div>
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name}}
     </li>
   </ul>

 </div>
</テンプレート>
<スクリプト>
'vue' から {reactive} をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
  設定(){
    satte = react({
       編曲:[
         {name:"Si Teng",id:'0011'},
         {name:"アンダー・ザ・スキン",id:'0011'},
         {name:"百年の約束",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // クリックされた要素を削除する function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(インデックス==i){
          satte.arr.splice(i,1) は、
        }
      }
    }
    戻り値 { satte, del}
  },
}
</スクリプト> 

4. 削除ロジックを分離する

別モジュールを形成する

<テンプレート>
 <div>
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name}}
     </li>
   </ul>

 </div>
</テンプレート>
<スクリプト>
'vue' から {reactive} をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
  設定(){
    // onlyDelLuoJi() メソッドには配列とメソッドが含まれており、分解と同様です。let {satte,del }=onlyDelLuoJi();
    
    // 外部に公開する return {sate,del}
  },
}

関数onlyDelLuoJi(){
   satte = react({
       編曲:[
         {name:"Si Teng",id:'0011'},
         {name:"アンダー・ザ・スキン",id:'0011'},
         {name:"百年の約束",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // クリックされた要素を削除する function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(インデックス==i){
          satte.arr.splice(i,1) は、
        }
      }
    }
    //データ satte とメソッド del を公開する return { satte,del }
}
</スクリプト>

5. 追加機能を実装する

イベント間でパラメータを渡す

<テンプレート>
 <div>
   <div>
      <input type="text" v-model="addobj.watchTv.name">
      <button @click="addHander">追加</button>
   </div>
   
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name}}
     </li>
   </ul>

 </div>
</テンプレート>
<スクリプト>
'vue' から {reactive} をインポートします
エクスポートデフォルト{
  名前: 'アプリ'、
  設定(){
    // onlyDelLuoJi() メソッドには配列とメソッドが含まれており、分解と同様です。let {satte,del }=onlyDelLuoJi();
    
    // 渡されたパラメータ satte は、onlyDelLuoJi 関数で提供される satte です。パスlet { addobj,addHander }=OnlyaddHander(satte);

    // 外部に公開する return {sate,del,addobj, addHander}
  },
}

//関数モジュールを追加する function OnlyaddHander(satte){
  console.log('initialize add', satte)
    addobj = リアクティブ({
        テレビを見る:{
          名前:""、
          id:""
        }
     });

    関数addHander(){
      // 間違ったメソッドをリセットしてクリアします // satte.arr.push(addobj.watchTv)
        // addobj.watchTv.name = ""; 
        // addobj.watchTv.id = "";
        

          // 正しいアプローチ let oldobj = Object.assign({}, addobj.watchTv)
        satte.arr.push(oldobj)
    }
    戻り値: { addobj, addHander }
}

//関数モジュール関数のみ削除DelLuoJi(){
  console.log('初期化を削除')
   satte = react({
       編曲:[
         {name:"Si Teng",id:'0011'},
         {name:"アンダー・ザ・スキン",id:'0011'},
         {name:"百年の約束",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // クリックされた要素を削除する function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(インデックス==i){
          satte.arr.splice(i,1) は、
        }
      }
    }
    //データ satte とメソッド del を公開する return { satte,del }
}
</スクリプト>

6 別々のファイルに抽出する

追加と削除のロジックを別のファイルに分離したいと考えています。
add.jsは関連するロジックを追加するものです
del.jsは削除ロジックです

「vue」から{reactive}をインポートします
関数OnlyaddHander(satte){
  console.log('initialize add', satte)
    addobj = リアクティブ({
        テレビを見る:{
          名前:""、
          id:""
        }
     });
    関数addHander(e){
        // 間違ったメソッドをリセットしてクリアします // satte.arr.push(addobj.watchTv)
        // addobj.watchTv.name = ""; 
        // addobj.watchTv.id = "";
        // 正しいアプローチ let oldobj = Object.assign({}, addobj.watchTv)
        satte.arr.push(oldobj)
        e.preventDefault();
    }
    戻り値: { addobj, addHander }
}
エクスポートデフォルトOnlyaddHander

アデル

「vue」から{reactive}をインポートします
関数onlyDelLuoJi() {
  console.log('初期化を削除')
   satte = react({
       編曲:[
         {name:"Si Teng",id:'0011'},
         {name:"アンダー・ザ・スキン",id:'0011'},
         {name:"百年の約束",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // クリックされた要素を削除する function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(インデックス==i){
          satte.arr.splice(i,1) は、
        }
      }
    }
    //データ satte とメソッド del を公開する return { satte,del }
}
エクスポートデフォルトのみDelLuoJi

メインファイル

<テンプレート>
 <div>
   <div>
      <input type="text" v-model="addobj.watchTv.name">
      <button @click="addHander">追加</button>
   </div>
   
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name}}
     </li>
   </ul>

 </div>
</テンプレート>
<スクリプト>
「./components/del」からonlyDelLuoJiをインポートします。
「./components/add」からOnlyaddHanderをインポートします。
エクスポートデフォルト{
  名前: 'アプリ'、
  設定(){
    // onlyDelLuoJi() メソッドには配列とメソッドが含まれており、分解と同様です。let {satte,del }=onlyDelLuoJi();
    
    // パラメータを渡す let { addobj,addHander }=OnlyaddHander(satte);

    // 外部に公開する return {sate,del,addobj, addHander}
  },
}
</スクリプト>

以上がvue3組み合わせAPIにおけるsetup、ref、reactiveの詳しい使い方です。vue組み合わせAPIの詳細については、123WORDPRESS.COMの他の関連記事もぜひご覧ください!

以下もご興味があるかもしれません:
  • vue3 の setUp とリアクティブ関数の使用方法の詳細な説明
  • Vue3 における ref と reactive の詳細な説明と拡張
  • Vue3 のリアクティブリセットの問題と解決策

<<:  MySQL ALTERコマンドの知識ポイントのまとめ

>>:  Mysql マスタースレーブレプリケーションの注意事項の説明

推薦する

MySQL チュートリアル データ定義言語 DDL の例 詳細な説明

目次1. SQL言語の基本機能の紹介2. データ定義言語の目的3. データベースの作成と破棄4. デ...

ドラッグアンドドロップによる並べ替えの詳細を実現する js

目次1. はじめに2. 実装3. HTML ドラッグ アンド ドロップ API を使用しないのはなぜ...

HTML 特殊文字エンコーディング CSS3 コンテンツに関する簡単な説明:「私は特別なシンボルです」

プロジェクトで使用されている特殊文字とアイコンHTMLコードXML/HTML コードコンテンツをクリ...

Centos7でmysql5.7.19のデータ保存場所を移動する方法

シナリオ: データ量が増加すると、MySQL が配置されているディスクがいっぱいになり、より大きなス...

JavaScript の新しい要素トラバーサルプロパティを使用して子要素をトラバースする方法を学びます

目次1. ChildNodes属性のトラバーサル2. 要素シリーズ属性のトラバーサル以前は、chil...

派手なカルーセル効果を実現するJavaScript

この記事では、JavaScriptで派手なカルーセル効果を実装する2つの方法を紹介します。具体的な内...

Ubuntu 18.04 のすべての Python ライブラリを一度にアップグレードする方法

ピップとは何かpip は、Python パッケージの検索、ダウンロード、インストール、アンインストー...

JavaScriptの信頼性の低い未定義

undefined JavaScript では、値が undefined かどうかを判断したい場合は...

Vue-router ネストルーティングの詳細な説明

目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ(フルパスを...

要素テーブルの多層ネスト表示の実践

複数の注文を含むリストが必要です。各注文は一意にすることも、複数の注文を結合することもできます。各注...

分散監視システムにおけるZabbixのアクティブ、パッシブ、Web監視のプロセスの詳細な説明

前回の記事では、Zabbix のネットワーク検出機能について学習し、アクションと組み合わせてホストの...

ホスト上のDockerコンテナ内でシェルまたはプログラムを実行する

Docker コンテナに繰り返し入って操作することを避けるために、コンテナ内の一連の命令をホストマシ...

ミニプログラムは、カスタムのマルチレベル単一選択と複数選択を実装します

この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装す...