快捷導(dǎo)航

淺談vue3在項(xiàng)目中的邏輯抽離和字段顯示

更新時(shí)間：2021年08月10日 09:22:51 作者：我的div丟了腫么辦

本文主要介紹了vue3在項(xiàng)目中的邏輯抽離和字段顯示，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

邏輯分層

我們?cè)谑褂胿ue3開(kāi)發(fā)項(xiàng)目的時(shí)候，
如何進(jìn)行【區(qū)域分層】呢？？？？
舉一個(gè)簡(jiǎn)單的小粒子
一個(gè)區(qū)域有【查詢邏輯、修改后的保存邏輯、新增邏輯、刪除邏輯】
這個(gè)頁(yè)面可能還有其他的區(qū)域。A區(qū)域、B區(qū)域,C區(qū)域...【有很多邏輯】
這個(gè)時(shí)候我們可以將一個(gè)區(qū)域的邏輯分離出去

將各個(gè)區(qū)域業(yè)務(wù)分開(kāi)

export default {
  setup () {
    let {queryDo,addDo,delDO,EditDo}=allFun();
    queryDo();//查詢接口就會(huì)被調(diào)用了
  
  }
}

// 這個(gè)是頁(yè)面A區(qū)域的邏輯
function allFun(){
  console.log('我是 allFun 函數(shù)內(nèi)的直接語(yǔ)句我將會(huì)被執(zhí)行' )
  function queryDo(){
    console.log('我是查詢接口，調(diào)用后端的數(shù)據(jù)')
  }
  function addDo(){
    console.log('我是新增')
  }
  function delDO(){
    console.log('我是刪除')
  }
  function EditDo(){
    console.log('我是編輯接口')
  }
  return {queryDo,addDo,delDO,EditDo}
}
</script>

這樣做的優(yōu)勢(shì)

當(dāng)我們看見(jiàn) allFun函數(shù)的時(shí)候。
我們就可以知道這個(gè)區(qū)域的所有邏輯
包含crud。方便后期的維護(hù)

這樣的場(chǎng)景應(yīng)該如何處理

在我們寫(xiě)業(yè)務(wù)邏輯的時(shí)候，
我們最后發(fā)現(xiàn) A和B兩個(gè)區(qū)域都需要調(diào)用同一個(gè)接口
但是由于A區(qū)域已經(jīng)寫(xiě)好了這個(gè)被調(diào)用的接口
這個(gè)時(shí)候我就想直接去調(diào)用A區(qū)域中的接口

<script>
export default {
  setup () {
    // 這里使用的是結(jié)構(gòu)，A區(qū)域
    let {queryDo,addDo,delDO,EditDo}=aAreaAllFun();

    // B區(qū)域
    let {querHander}=bAreaAllFun();

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

// 這個(gè)是A區(qū)域頁(yè)面某個(gè)區(qū)域的邏輯
function aAreaAllFun(){
  function queryDo(){
    console.log('我是A區(qū)域的查詢接口')
  }
  function addDo(){
    console.log('我是新增')
  }
  function delDO(){
    console.log('我是刪除')
  }
  function EditDo(){
    console.log('我是編輯接口')
  }
  return {queryDo,addDo,delDO,EditDo}
}

// 這是B區(qū)域的業(yè)務(wù)邏輯
function bAreaAllFun(){
  // 直接去調(diào)用A區(qū)域的查詢接口
  aAreaAllFun().queryDo();

  function querHander(){
    console.log("B區(qū)域的查詢接口")
  }
 
  return {querHander}
}
</script>

雖然使用
aAreaAllFun().queryDo();
直接去調(diào)用A區(qū)域的查詢接口
解決了問(wèn)題
但是這樣產(chǎn)生了一個(gè)新的問(wèn)題是
查詢接口被包含在了A區(qū)域；
最后的做法是查詢接口應(yīng)該單獨(dú)抽離出去，
這樣也方便后期我們的維護(hù)

優(yōu)化

<script>
export default {
  setup () {
     // 這個(gè)是A區(qū)域頁(yè)面某個(gè)區(qū)域的邏輯
    let {addDo,delDO,EditDo}=aAreaAllFun()
    
    // 這個(gè)是B區(qū)域頁(yè)面某個(gè)區(qū)域的邏輯
    let {querHander}=bAreaAllFun();

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

// 公共的查詢接口 很多區(qū)域可能會(huì)使用
function queryDo(){
  console.log('我是區(qū)域的查詢接口，我被抽離出去了')
}

// 這個(gè)是A區(qū)域頁(yè)面某個(gè)區(qū)域的邏輯
function aAreaAllFun(){
 
  function addDo(){
    console.log('我是新增')
  }
  function delDO(){
    console.log('我是刪除')
  }
  function EditDo(){
    console.log('我是編輯接口')
  }
  return {addDo,delDO,EditDo}
}

// 這是B區(qū)域的業(yè)務(wù)邏輯
function bAreaAllFun(){
  // 直接去調(diào)用公共的查詢接口
   queryDo();

  function querHander(){
    console.log("B區(qū)域的查詢接口")
  }
 
  return {querHander}
}
</script>

reactive 不一定非要寫(xiě)在setup函數(shù)中

很多的小伙伴以為reactive一定要寫(xiě)在setup函數(shù)中
其實(shí)不是這樣的哈
它可以寫(xiě)在你需要的地方
比如下面的aAreaAllFun函數(shù)中可以使用reactive

<template>
  <div>
    <h2>姓名: {{ areaData.info.name}}</h2>
    <h2>年齡: {{ areaData.info.age}}</h2>
    <h2>性別: {{ areaData.info.sex}}</h2>
  </div>
</template>
<script>
import { reactive } from '@vue/reactivity';
export default {
  setup () {
 
    let {addDo,areaData}=aAreaAllFun();

    return {addDo,areaData}
  }
}
// 這個(gè)是A區(qū)域頁(yè)面某個(gè)區(qū)域的邏輯
function aAreaAllFun(){
  let areaData=reactive({
    info:{
      name:'張三',
      age:20,
      sex:'男'
    }
  })
  function addDo(){
    console.log('我是新增')
  }
  return {addDo,areaData}
}
</script>

如何在頁(yè)面上直接顯示值

在上面這個(gè)例子中
我們想要實(shí)現(xiàn)姓名、年齡、和性別
我們需要 areaData.info.xxx
這樣做太麻煩了，我們需要優(yōu)化一下

<template>
  <div>
    <h2>姓名: {{ name}}</h2>
    <h2>年齡: {{ age}}</h2>
    <h2>性別: {{ sex}}</h2>
  </div>

  <button @click="ChangeCont">改變值</button>
</template>
<script>
import { reactive,toRefs } from 'vue';
export default {
  setup () {
    let {name,age,sex,ChangeCont }=aAreaAllFun();
    return {name,age,sex,ChangeCont}
  }
}
// 這個(gè)是A區(qū)域頁(yè)面某個(gè)區(qū)域的邏輯
function aAreaAllFun(){
  let areaData=reactive({
    info:{
      name:'張三',
      age:20,
      sex:'男'
    }
  })

  function ChangeCont(){
    // 這樣更改值，視圖上是不會(huì)響應(yīng)的哈【錯(cuò)誤的】
    // areaData.info={
    //   name:'李四',
    //   age:21,
    //   sex:'男'
    // }

    // 這樣是可以的正確跟新視圖的 【ok的】
    areaData.info.name='123'
    areaData.info.age=12
    areaData.info.sex='男'
  }

  //   toRefs 可以把一個(gè)響應(yīng)式對(duì)象轉(zhuǎn)換為普通的對(duì)象。
  // 該普通對(duì)象的每一個(gè)值都是ref。
  // 由于變成了ref，所以我們需要使用value。
  return {ChangeCont,...toRefs(areaData.info)}
}
</script>

到此這篇關(guān)于淺談vue3在項(xiàng)目中的邏輯抽離和字段顯示的文章就介紹到這了,更多相關(guān)vue3 邏輯抽離和字段顯示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: