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

1. Getting started with setUp

Briefly introduce the following code functions:
Use the ref function to monitor changes in a variable and render it to the view.
The setUp function is the entry function of the combined API. This is very important.
setUp can monitor changes in variables! We will use it
ref is built into vue and needs to be imported.

<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>

2. Understand the use of reactive

The ref function can only monitor data changes of simple types.
It is not possible to monitor changes of complex types (arrays, objects).
So our protagonist reactive appears.
The functions in setup are automatically executed once.

<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>

3. Use reactive

Deleting a view

<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>

4. Separate the deletion logic

Form a separate module

<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>

5. Implement the added functionality

Passing parameters between events

<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>

6 Extract them into separate files

We want to separate the logic of adding and deleting into a separate file.
add.js is to add related logic
del.js is the deletion logic

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

adel.js

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

Main File

<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>

The above is the detailed usage of setup, ref, and reactive in the vue3 combination API. For more information about the vue combination API, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: