>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 8413 个阅读者 刷新本主题
 * 贴子主题:  【Vue.js技术专题】分割setup()函数 回复文章 点赞(0)  收藏  
作者:sunweiqin    发表时间:2022-08-29 16:27:34     消息  查看  搜索  好友  邮件  复制  引用

本文参考孙卫琴,杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书

Vue框架的组合API的主要用途是更加灵活地对项目进行模块化的分割。当setup()函数本身非常庞大,也必须对它进行分割,这样才能发挥组合API的特长。
对setup()函数的分割包括两个步骤:
(1)把setup()函数分割成多个函数。把处理相关业务逻辑的代码分割到同一个函数中。
(2)把从setup()函数中分割出来的每个函数放到单独的.js文件中。

1.把setup()函数分割到多个函数中

例程1的PersonFull.vue定义了PersonFull组件,它的setup()函数会返回person和persons变量,这两个变量都支持响应式机制。setup()函数还会返回add()和remove()方法。add()方法向persons.array数组中加入一个person对象,remove()方法从persons.array数组中删除特定的person对象。

例程1  PersonFull.vue

<template>
  <div>
    <p>姓名:<input type="text" v-model="person.name"></p>
    <p>年龄:<input type="text" id="" v-model="person.age"></p>
    <p><button @click="add()">添加</button></p>
   </div>

   <div>
    <ul>
      <li v-for="v in persons.array" :key="v.id" >
        ID:{{v.id}},姓名:{{ v.name }},年龄:{{ v.age }}  
        <button @click="remove(v.id)" >删除 </button>
      </li>
    </ul>
  </div>
</template>

<script>
  import { reactive} from 'vue'
  export default {
    setup() {
      const { persons, remove } = useRemovePerson()
      const { person, add } = useAddPerson(persons)
      return { persons,remove, person, add}
    }
  }
  
  // 向persons数组添加新的person对象
  const useAddPerson = (persons) => {
    const person= reactive({ id: '', name: '', age: '' })
  
    const add = (()=> {  
      //计算新添加person对象的id
      let index=null
      for( index in persons.array){
        if(person.id<=persons.array[index].id)
          person.id=persons.array[index].id+1
      }      
  
      //创建person对象的拷贝。该拷贝不支持响应式机制  
      const personCopy = Object.assign({},person)
  
      //添加person对象
      persons.array.push(personCopy)
      
      person.id = ''
      person.name = ''
      person.age = ''
    })
    return { person,add }
  }
  
  // 删除一个person对象
  const useRemovePerson = () => {
    //包含了所有的person对象
    const persons = reactive({
      array: [
        { id: 1, name: "Mary", age: 17 },
        { id: 2, name: "Tom", age: 20 },
        { id: 3, name: "Linda", age: 18 },
      ]
    })
  
    const remove = (id) => {
      //根据id删除特定的person对象
      persons.array =persons.array.filter((v) => v.id !== id)
    }
    return { persons, remove }
  }
</script>

PersonFull组件的setup()函数分割出来两个函数:useAddPerson()和useRemovePerson()。useAddPerson()定义并且返回person变量和add()方法,useRemovePerson()定义并且返回persons变量和remove()方法。
在setup()函数中,利用JavaScript的解构语法,从useAddPerson()和useRemovePerson()函数的返回值中获得相关的变量和方法,然后再由setup()函数把它们返回:

  setup() {
    const { persons, remove } = useRemovePerson()
    const { person, add } = useAddPerson(persons)
    return { persons,remove, person, add}
  }

Vue组件的混入块也是分割组件的一种方式,是把组件分割成多个混入块,这些混入块没有输入参数和输出值,就像没有生命力的代码,必须把它们合并到组件中才会工作。而setup()函数分割出来的模块仍然是函数,可以有输入参数和返回值,还可以与其他函数模块交换数据,因此这样的模块既能够独立完成特定的功能,又能够方便地与其他的模块整合。这种分割方式更有助于开发团队按照业务逻辑来划分任务并进行分工合作。
在index.js中为PersonFull.vue组件设置的路由如下:

    {
      path: '/full',
      name: 'full',
      component: PersonFull
    }

通过浏览器访问“http://localhost:8080/#/full”,会显示如图1所示的网页。
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
图1  PersonFull组件的网页

2.把setup()函数分割到多个文件中

上文虽然从setup()函数中分割出了useRemovePerson()和useAddPerson()函数,但是它们都位于同一个PersonFull.vue文件中。本节将把它们放到单独的文件中,进一步提高每个函数模块的独立性。
可以把例程1的PersonFull.vue拆分成三个文件:Person.vue、remove.js和add.js,参见例程2、例程3和例程4。
例程2  Person.vue

<template>……</template>
<script>
  import useAddPerson from './add.js'
  import useRemovePerson from './remove.js'
  export default {
    setup() {
      const { persons, remove } = useRemovePerson()
      const { person, add } = useAddPerson(persons)
      return { persons,remove, person, add}
    }
  }
</script>

例程3  remove.js

import { reactive} from 'vue'

// 删除一个person对象
const useRemovePerson = () => {
……
return { persons, remove }
}

export default useRemovePerson
例程4  add.js
import { reactive} from 'vue'

// 向persons数组添加新的person对象
const useAddPerson = () => {
  ……
  return { person, add }
}

export default useAddPerson
在index.js中,为Person组件设置的路由如下:
    {
      path: '/person',
      name: 'person',
      component: Person
    }

通过浏览器访问“http: //localhost:8080/#/person”,会显示图1所示的网页。





程序猿的技术大观园:www.javathinker.net
  Java面向对象编程-->Java注解
  JavaWeb开发-->开发JavaMail Web应用
  JSP与Hibernate开发-->映射对象标识符
  Java网络编程-->用Spring整合CXF发布Web服务
  精通Spring-->Vue CLI脚手架工具
  Vue3开发-->Vue简介
  【Vue.js技术专题】Vue组件的数据监听
  【Vue.js技术专题】Vue组件的命名规则
  【Vue.js技术专题】路由管理器的基本用法
  【Vue.js技术专题】插槽slot的基本用法
  【Spring Cloud Alibaba专题】ShardingSphere核心概念
  【Spring Cloud Alibaba专题】@SentinelResource注解的用法
  【Spring Cloud Alibaba专题】Dubbo框架中提供者回调消费者
  【Spring Cloud Alibaba专题】OpenFeign开启对请求和响应数据...
  【持久化专题】通过JPA API调用存储过程
  【Java编程基础专题】用Scanner类读取用户在控制台输入的数据
  【Java网络编程专题】优化访问数据库的程序代码的一些技巧
  【JavaWeb专题】Spring MVC创建Web应用范例,轻松入门
  IT技术书写作技巧分享:慎用概念和术语
  【Java基础编程专题】Java集合与数组的互换
  【Java基础编程专题】Java基本类型和引用类型的三个区别
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。