A brief discussion on logic extraction and field display of Vue3 in projects

export default {
  setup () {
    let {queryDo,addDo,delDO,EditDo}=allFun();
    queryDo(); //The query interface will be called}
}

// This is the logic of area A of page function allFun(){
  console.log('I am the direct statement in the allFun function and I will be executed' )
  function queryDo(){
    console.log('I am querying the interface and calling the backend data')
  }
  function addDo(){
    console.log('I am new')
  }
  function delDO(){
    console.log('I deleted')
  }
  function EditDo(){
    console.log('I am the editor interface')
  }
  return {queryDo,addDo,delDO,EditDo}
}
</script>

<script>
export default {
  setup () {
    // The structure used here is area A let {queryDo,addDo,delDO,EditDo}=aAreaAllFun();

    // Area B let {querHander}=bAreaAllFun();

    return {queryDo,addDo,delDO,EditDo,querHander}
  }
}

// This is the logic of a certain area on the A area page function aAreaAllFun(){
  function queryDo(){
    console.log('I am the query interface of area A')
  }
  function addDo(){
    console.log('I am new')
  }
  function delDO(){
    console.log('I deleted')
  }
  function EditDo(){
    console.log('I am the editor interface')
  }
  return {queryDo,addDo,delDO,EditDo}
}

// This is the business logic of area B function bAreaAllFun(){
  // Directly call the query interface of area A aAreaAllFun().queryDo();

  function querHander(){
    console.log("Query interface of area B")
  }
 
  return {querHander}
}
</script>

<script>
export default {
  setup () {
     // This is the logic of a certain area on the A area page let {addDo,delDO,EditDo}=aAreaAllFun()
    
    // This is the logic of a certain area on the B area page let {querHander}=bAreaAllFun();

    return {queryDo,addDo,delDO,EditDo,querHander}
  }
}

// Public query interface Many areas may use function queryDo(){
  console.log('I am the query interface of the region, I have been pulled out')
}

// This is the logic of a certain area on the A area page function aAreaAllFun(){
 
  function addDo(){
    console.log('I am new')
  }
  function delDO(){
    console.log('I deleted')
  }
  function EditDo(){
    console.log('I am the editor interface')
  }
  return {addDo,delDO,EditDo}
}

// This is the business logic of area B function bAreaAllFun(){
  // Directly call the public query interface queryDo();

  function querHander(){
    console.log("Query interface of area B")
  }
 
  return {querHander}
}
</script>

<template>
  <div>
    <h2>Name: {{ areaData.info.name}}</h2>
    <h2>Age: {{ areaData.info.age}}</h2>
    <h2>Gender: {{ areaData.info.sex}}</h2>
  </div>
</template>
<script>
import { reactive } from '@vue/reactivity';
export default {
  setup () {
 
    let {addDo,areaData}=aAreaAllFun();

    return {addDo,areaData}
  }
}
// This is the logic of a certain area on the A area page function aAreaAllFun(){
  let areaData = reactive({
    info:
      name:'Zhang San',
      age:20,
      sex:'male'
    }
  })
  function addDo(){
    console.log('I am new')
  }
  return {addDo,areaData}
}
</script>

<template>
  <div>
    <h2>Name: {{ name}}</h2>
    <h2>Age: {{ age}}</h2>
    <h2>Gender: {{ sex}}</h2>
  </div>

  <button @click="ChangeCont">Change value</button>
</template>
<script>
import { reactive,toRefs } from 'vue';
export default {
  setup () {
    let {name,age,sex,ChangeCont }=aAreaAllFun();
    return {name,age,sex,ChangeCont}
  }
}
// This is the logic of a certain area on the A area page function aAreaAllFun(){
  let areaData = reactive({
    info:
      name:'Zhang San',
      age:20,
      sex:'male'
    }
  })

  function ChangeCont(){
    // If you change the value in this way, the view will not respond. [Error]
    //areaData.info={
    // name:'Li Si',
    //age:21,
    // sex:'male'
    // }

    // This is OK to update the view correctly [ok]
    areaData.info.name='123'
    areaData.info.age=12
    areaData.info.sex='male'
  }

  // toRefs can convert a responsive object to a normal object.
  // Every value of this common object is a ref.
  // Since it becomes a ref, we need to use the value.
  return {ChangeCont,...toRefs(areaData.info)}
}
</script>