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 マスタースレーブレプリケーションの注意事項の説明

推薦する

Linux インストール MongoDB の起動と一般的な問題の解決

MongoDB のインストール プロセスと問題記録1. MongoDBのインストールMongoDBを...

Hadoop 2.x と 3.x の 22 ポイントの比較、Hadoop 3.x の 2.x に対する改善点

質問ガイド1. Hadoop 3.x はどのようにして障害を許容するのでしょうか? 2. Hadoo...

動的なセカンダリメニューを実現するためのCSS

シンプルなセカンダリメニューを動的に実装するマウスを第 1 レベルのラベル上に置くと、マウスが小さな...

ウェブページ制作と饅頭の関係(体験の共有)

昨日は遅くまで寝ていて、一日中起きていました。私の年齢では、夜更かしして本を書くのはもう無理のようで...

HTML ベースタグ target=_parent の使用の紹介

<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのタ...

進捗バーのネイティブ JavaScript 実装

進捗バーを実装するためのJavaScriptの具体的なコードは参考までに。具体的な内容は次のとおりで...

VUE v-for の :key の詳細な説明

v-for タグにキーが追加されていない場合。 <!DOCTYPE html> <...

MySQL 8.0 の新機能の落とし穴と解決策についての簡単な説明 (要約)

1. ユーザーを作成して承認するMySQL 8.0 では、ユーザーの作成と認証が以前とは異なります...

Javascript のスコープとクロージャの詳細

目次1. 範囲2. スコープチェーン3. 語彙の範囲5. 閉鎖の適用6. クロージャの欠陥7. 閉会...

MySQL の効率的なクエリの左結合とグループ化 (プラス インデックス)

mysql 効率的なクエリMySQL は、左結合の速度を上げるために group by を犠牲にし...

MySQL 全文あいまい検索 MATCH AGAINST メソッドの例

MySQL 4.x 以降では、全文検索 MATCH ... AGAINST モード (大文字と小文字...

ノードスクリプトで自動サインインと抽選機能を実現

目次1. はじめに2. 準備3. スクリプトプロジェクトの構築4. コードの作成と実行5. まとめと...

ES6のシンボルデータ型について詳しく説明します

目次シンボルデータタイプシンボルが表示される理由シンボルの特徴シンボルの応用rbオブジェクトにupメ...

React+Amapは緯度と経度をリアルタイムで取得し、住所を特定します

目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...

nginx でディレクトリ ホワイトリストと IP ホワイトリストを設定する方法

1. ディレクトリホワイトリストを設定する:指定されたリクエストパスに制限を設定しないでください。た...