【Vue Mastery】Composition API 深度解读 之 Modularizing

Modularizing

• 为了按照功能组织代码，我们把代码移出setup组成一个复合函数
  ,在setup中调用这个复合函数。

<template>
	...
</template>

<script>
	...
  setup(){
      return useEeventSpace();
  }

  function useEeventSpace(){
    const capacity = ref(3)
    const attending = ref()["Tim", "Bob", "Joe"]
    const spaceLeft = computed(() => {
        return event.capacity - event.attending.length;
      }),
    function increaseCapacity(){
      capacity.value++
    }
    return {
      capacity,
      attending,
      spaceLeft,
      increaseCapacity
    }
  }
  ...
</script>

• 为跨组件使用，我们把这个复合函数放到一个单独文件中。

<template>
	...
</template>

<script>
import useEeventSpace from './hook/useEeventSpace'
	...
  setup(){
      return useEeventSpace();
  }

 
  ...
</script>

//  hook/useEeventSpace.ts

 export default function useEeventSpace(){
    const capacity = ref(3)
    const attending = ref()["Tim", "Bob", "Joe"]
    const spaceLeft = computed(() => {
        return event.capacity - event.attending.length;
      }),
    function increaseCapacity(){
      capacity.value++
    }
    return {
      capacity,
      attending,
      spaceLeft,
      increaseCapacity
    }
  }

• 需要添加多个复合函数我们可以这样写

<template>
	...
</template>

<script>
import useEeventSpace from './hook/useEeventSpace'
import useMapping from './hook/useMapping'
	...
  setup(){
      // 错误写法 return {useEeventSpace(),useMapping()}
      //  这样写会出现像Mixin同样的问题，不知道什么对象注入进来
      // return {...useEeventSpace(),...useMapping()}
      // 所以我们可以用这些复合函数创建对象再导出，这样更明确什么对象来自什么函数
      const {aaa,bbb,ccc} = useEeventSpace()
      const {ddd,eee,fff} = useMapping()
      return {aaa,bbb,ccc,ddd,eee,fff}
  }

 
  ...
</script>

注意：return返回的数据的方法

• 方法一：return useEeventSpace()
• 方法二：return {...useEeventSpace(),...useMapping()}
• 方法三：const {aaa,bbb,ccc} = xxx1() const {ddd,eee,fff} = xxx2() return {aaa,bbb,ccc,ddd,eee,fff}

对于composition APi和hook对比

• 虽然在设计的时候参考hook，但是在底层的依赖收集相关是不一样的
• 但是使用起来是差不多的