浅谈vue3在项目中的逻辑抽离和字段显示

目录

• 逻辑分层
  
• 将各个区域业务分开
  
• 这样做的优势
  
• 这样的场景应该如何处理
  
• 优化
  
• reactive 不一定非要写在setup函数中
  
• 如何在页面上直接显示值
  

逻辑分层

我们在使用vue3开发项目的时候，
如何进行【区域分层】呢？？？？
举一个简单的小粒子
一个区域有【查询逻辑、修改后的保存逻辑、新增逻辑、删除逻辑】
这个页面可能还有其他的区域。A区域、B区域,C区域...【有很多逻辑】
这个时候我们可以将一个区域的逻辑分离出去

将各个区域业务分开

export default {
  setup () {
    let {queryDo,addDo,delDO,EditDo}=allFun();
    queryDo();//查询接口就会被调用了
  
  }
}

// 这个是页面A区域的逻辑
function allFun(){
  console.log('我是 allFun 函数内的直接语句我将会被执行' )
  function queryDo(){
    console.log('我是查询接口，调用后端的数据')
  }
  function addDo(){
    console.log('我是新增')
  }
  function delDO(){
    console.log('我是删除')
  }
  function EditDo(){
    console.log('我是编辑接口')
  }
  return {queryDo,addDo,delDO,EditDo}
}

这样做的优势

• 当我们看见 allFun函数的时候。
• 我们就可以知道这个区域的所有逻辑
• 包含crud。方便后期的维护

这样的场景应该如何处理

在我们写业务逻辑的时候，
我们最后发现 A和B两个区域都需要调用同一个接口
但是由于A区域已经写好了这个被调用的接口
这个时候我就想直接去调用A区域中的接口

虽然使用
aAreaAllFun().queryDo();
直接去调用A区域的查询接口
解决了问题
但是这样产生了一个新的问题是
查询接口被包含在了A区域；
最后的做法是查询接口应该单独抽离出去，
这样也方便后期我们的维护

优化

reactive 不一定非要写在setup函数中

很多的小伙伴以为reactive一定要写在setup函数中
其实不是这样的哈
它可以写在你需要的地方
比如下面的aAreaAllFun函数中可以使用reactive

如何在页面上直接显示值

在上面这个例子中
我们想要实现姓名、年龄、和性别
我们需要 areaData.info.xxx
这样做太麻烦了，我们需要优化一下

到此这篇关于浅谈vue3在项目中的逻辑抽离和字段显示的文章就介绍到这了,更多相关vue3 逻辑抽离和字段显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！