The complete usage of setup, ref, and reactive in Vue3 combination API

<template>
 <div>{{ countNum}}</div>
 <button @click="handerFunc">Button</button>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
    // This sentence means that a variable count is defined. The initial value of this variable is 100
    let countNum = ref(100);

    // In the combined API, if you want to define a method, you don't need to define it in methods. Just define it directly function handerFunc(){
      // console.log(countNum); //countNum is an object countNum.value += 10;
    }
    //Methods or variables defined in the combined api. If it is needed outside, it must be exposed through return {aaa,func} return {countNum,handerFunc}
  }
}
</script> 

<template>
 <div>
   <ul>
     <li v-for="item in satte.arr" :key="item.id">
       {{item.name }}
     </li>
   </ul>

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    console.log("setUp will be executed automatically")
    // Notes on the ref function:
    // The ref function can only monitor simple data types, not complex data types (arrays, objects)
    // The reactive method contains an object let satte=reactive({
       arr:[
         {name:"Si Teng",id:'0011'},
         {name:"Under the Skin",id:'0011'},
         {name:"A Hundred Years' Promise",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    return { satte }
  },
}
</script>

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

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    let satte = reactive({
       arr:[
         {name:"Si Teng",id:'0011'},
         {name:"Under the Skin",id:'0011'},
         {name:"A Hundred Years' Promise",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // Delete the clicked element function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    return { satte, del}
  },
}
</script> 

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

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    // The onlyDelLuoJi() method contains an array and a method; similar to deconstruction let {satte,del }=onlyDelLuoJi();
    
    // Expose to the outside world return {sate,del}
  },
}

function onlyDelLuoJi(){
   let satte = reactive({
       arr:[
         {name:"Si Teng",id:'0011'},
         {name:"Under the Skin",id:'0011'},
         {name:"A Hundred Years' Promise",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // Delete the clicked element function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    //Expose data satte and method del return { satte,del }
}
</script>

<template>
 <div>
   <div>
      <input type="text" v-model="addobj.watchTv.name">
      <button @click="addHander">Add</button>
   </div>
   
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name }}
     </li>
   </ul>

 </div>
</template>
<script>
import {reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    // The onlyDelLuoJi() method contains an array and a method; similar to deconstruction let {satte,del }=onlyDelLuoJi();
    
    // The passed parameter satte is the satte provided in the onlyDelLuoJi function. Pass let { addobj,addHander }=OnlyaddHander(satte);

    // Expose to the outside world return {sate,del,addobj, addHander}
  },
}

//Add function module function OnlyaddHander(satte){
  console.log('initialize add', satte)
    let addobj = reactive({
        watchTv:{
          name:"",
          id:""
        }
     });

    function addHander(){
      // Reset and clear the wrong method // satte.arr.push(addobj.watchTv)
        // addobj.watchTv.name = ""; 
        // addobj.watchTv.id = "";
        

          // Correct approach let oldobj = Object.assign({}, addobj.watchTv)
        satte.arr.push(oldobj)
    }
    return { addobj, addHander }
}

//Delete function module function onlyDelLuoJi(){
  console.log('delete initialization')
   let satte = reactive({
       arr:[
         {name:"Si Teng",id:'0011'},
         {name:"Under the Skin",id:'0011'},
         {name:"A Hundred Years' Promise",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // Delete the clicked element function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    //Expose data satte and method del return { satte,del }
}
</script>

import { reactive } from "vue"
function OnlyaddHander(satte){
  console.log('initialize add', satte)
    let addobj = reactive({
        watchTv:{
          name:"",
          id:""
        }
     });
    function addHander(e){
        // Reset and clear the wrong method // satte.arr.push(addobj.watchTv)
        // addobj.watchTv.name = ""; 
        // addobj.watchTv.id = "";
        // Correct approach let oldobj = Object.assign({}, addobj.watchTv)
        satte.arr.push(oldobj)
        e.preventDefault();
    }
    return { addobj, addHander }
}
export default OnlyaddHander

import { reactive } from "vue"
function onlyDelLuoJi() {
  console.log('delete initialization')
   let satte = reactive({
       arr:[
         {name:"Si Teng",id:'0011'},
         {name:"Under the Skin",id:'0011'},
         {name:"A Hundred Years' Promise",id:'0012'},
         {name:"三生三世",id:'0013'},
       ]
    })
    // Delete the clicked element function del(index){
      for(let i=0;i<satte.arr.length;i++){
        if(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    //Expose data satte and method del return { satte,del }
}
export default onlyDelLuoJi

<template>
 <div>
   <div>
      <input type="text" v-model="addobj.watchTv.name">
      <button @click="addHander">Add</button>
   </div>
   
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name }}
     </li>
   </ul>

 </div>
</template>
<script>
import onlyDelLuoJi from "./components/del"
import OnlyaddHander from "./components/add"
export default {
  name: 'App',
  setup(){
    // The onlyDelLuoJi() method contains an array and a method; similar to deconstruction let {satte,del }=onlyDelLuoJi();
    
    // Pass parameters let { addobj,addHander }=OnlyaddHander(satte);

    // Expose to the outside world return {sate,del,addobj, addHander}
  },
}
</script>