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

<テンプレート>
 <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} を通じて公開する必要があります。
  }
}
</スクリプト> 

<テンプレート>
 <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 }
  },
}
</スクリプト>

<テンプレート>
 <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}
  },
}
</スクリプト> 

<テンプレート>
 <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 }
}
</スクリプト>

<テンプレート>
 <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 }
}
</スクリプト>

「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}
  },
}
</スクリプト>