逻辑函数拆分业务:将同一组件中独立的业务代码通过函数做封装处理,提高代码的可维护性。
步骤:
1. 命名函数:use业务名.js
2. 用函数封装业务逻辑
3. 函数内,return 数据、方法
4. 组件中 调用函数使用
- // 封装业务逻辑函数,composables/useXXX.js文件
- export function useXXX(){
- ...业务逻辑代码
- return {
- 数据, // 组件中会用到的 数据和方法,return出来
- 方法
- }
- }
- // 组件中调用
- import { useXXX } from '@/composables/useXXX.js'
- const { 数据, 方法 } = useXXX()
思想总结:逻辑拆分,拆分在通过setup组合式API组合回来;函数use打头,内部封装逻辑,return组件需要的数据和方法。