zoukankan      html  css  js  c++  java
  • vue3逻辑分离和页面快速展示数据

    逻辑分层

    我们在使用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}
    }
    </script>
    

    这样做的优势

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

    这样的场景应该如何处理

    在我们写业务逻辑的时候,
    我们最后发现 A和B两个区域都需要调用同一个接口
    但是由于A区域已经写好了这个被调用的接口
    这个时候我就想直接去调用A区域中的接口
    
    <script>
    export default {
      setup () {
        // 这里使用的是结构,A区域
        let {queryDo,addDo,delDO,EditDo}=aAreaAllFun();
    
        // B区域
        let {querHander}=bAreaAllFun();
    
        return {queryDo,addDo,delDO,EditDo,querHander}
      }
    }
    
    // 这个是A区域页面某个区域的逻辑
    function aAreaAllFun(){
      function queryDo(){
        console.log('我是A区域的查询接口')
      }
      function addDo(){
        console.log('我是新增')
      }
      function delDO(){
        console.log('我是删除')
      }
      function EditDo(){
        console.log('我是编辑接口')
      }
      return {queryDo,addDo,delDO,EditDo}
    }
    
    // 这是B区域的业务逻辑
    function bAreaAllFun(){
      // 直接去调用A区域的查询接口
      aAreaAllFun().queryDo();
    
      function querHander(){
        console.log("B区域的查询接口")
      }
     
      return {querHander}
    }
    </script>
    
    虽然使用
    aAreaAllFun().queryDo();
    直接去调用A区域的查询接口
    解决了问题
    但是这样产生了一个新的问题是
    查询接口被包含在了A区域;
    最后的做法是查询接口应该单独抽离出去,
    这样也方便后期我们的维护
    

    优化

    <script>
    export default {
      setup () {
         // 这个是A区域页面某个区域的逻辑
        let {addDo,delDO,EditDo}=aAreaAllFun()
        
        // 这个是B区域页面某个区域的逻辑
        let {querHander}=bAreaAllFun();
    
        return {queryDo,addDo,delDO,EditDo,querHander}
      }
    }
    
    // 公共的查询接口 很多区域可能会使用
    function queryDo(){
      console.log('我是区域的查询接口,我被抽离出去了')
    }
    
    // 这个是A区域页面某个区域的逻辑
    function aAreaAllFun(){
     
      function addDo(){
        console.log('我是新增')
      }
      function delDO(){
        console.log('我是删除')
      }
      function EditDo(){
        console.log('我是编辑接口')
      }
      return {addDo,delDO,EditDo}
    }
    
    // 这是B区域的业务逻辑
    function bAreaAllFun(){
      // 直接去调用公共的查询接口
       queryDo();
    
      function querHander(){
        console.log("B区域的查询接口")
      }
     
      return {querHander}
    }
    </script>
    

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

    很多的小伙伴以为reactive一定要写在setup函数中
    其实不是这样的哈
    它可以写在你需要的地方
    比如下面的aAreaAllFun函数中可以使用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}
      }
    }
    // 这个是A区域页面某个区域的逻辑
    function aAreaAllFun(){
      let areaData=reactive({
        info:{
          name:'张三',
          age:20,
          sex:'男'
        }
      })
      function addDo(){
        console.log('我是新增')
      }
      return {addDo,areaData}
    }
    </script>
    

    如何在页面上直接显示值

    在上面这个例子中
    我们想要实现姓名、年龄、和性别
    我们需要 areaData.info.xxx
    这样做太麻烦了,我们需要优化一下
    
    <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}
      }
    }
    // 这个是A区域页面某个区域的逻辑
    function aAreaAllFun(){
      let areaData=reactive({
        info:{
          name:'张三',
          age:20,
          sex:'男'
        }
      })
    
      function ChangeCont(){
        // 这样更改值,视图上是不会响应的哈【错误的】
        // areaData.info={
        //   name:'李四',
        //   age:21,
        //   sex:'男'
        // }
    
        // 这样是可以的正确跟新视图的 【ok的】
        areaData.info.name='123'
        areaData.info.age=12
        areaData.info.sex='男'
      }
    
      //   toRefs 可以把一个响应式对象转换为普通的对象。
      // 该普通对象的每一个值都是ref。
      // 由于变成了ref,所以我们需要使用value。
      return {ChangeCont,...toRefs(areaData.info)}
    }
    </script>
    

    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    一些你可能用到的代码
    iOS 键盘下去的方法
    iOS设计模式汇总
    随笔
    Spring cloud config 分布式配置中心 (三) 总结
    Spring cloud config 分布式配置中心(二) 客户端
    Spring cloud config 分布式配置中心(一) 服务端
    jdbcUrl is required with driverClassName spring boot 2.0版本
    JpaRepository接口找不到 spring boot 项目
    解决IntelliJ “Initialization failed for 'https://start.spring.io'
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15116480.html
Copyright © 2011-2022 走看看