useAsyncState和生命周期钩子的顺序

1、基础运用 

<script setup>
const defaultData: ResponseStruct<Partial<IScheConfListModel[]>> = { data: [], total: 0 };
const { state, isLoading, execute } = useAsyncState(() => getScheConfList(form.value), defaultData, {
  onSuccess: (data) => {
    state.value = data.code === ResponseCodeEnum.SUCC ? state.value : defaultData;
    total.value = state.value.total || 0;  
    console.log('useAsyncState',state.value);
      
  },
});

console.log('setup函数中',state.value);
onMounted(()=>{
  console.log('我是挂载后',state.value);
  })
onBeforeMount(()=>{
  console.log('我是挂载前',state.value);
  })
<script>

 从图中可以看出，useAsyncState函数默认是在组件挂载之后才执行的，也就是在mounted之后。

2、immediate: false

我们可以通过设置immediate属性来让useAsyncState默认执行或者不执行。

如果设置immediate：false，则该函数不会立即执行，可以设置手动调用execute来在任何地方进行执行。

const defaultData: ResponseStruct<Partial<IScheConfListModel[]>> = { data: [], total: 0 };
const { state, isLoading, execute } = useAsyncState(() => getScheConfList(form.value), defaultData, {
  immediate: false,
  onSuccess: (data) => {
    state.value = data.code === ResponseCodeEnum.SUCC ? state.value : defaultData;
    total.value = state.value.total || 0;
    console.log('useAsyncState', state.value);
  },
});
console.log('setup函数中', state.value);
onMounted(() => {
  console.log('我是挂载后', state.value);
});
onBeforeMount(() => {
  console.log('我是挂载前', state.value);
});

 此时并没有执行该函数，因此也就没有获取数据，这时我们可以手动执行该函数，比如在mounted钩子中执行，但是执行仍然是在mounted之后，即效果和立即执行一样。

const defaultData: ResponseStruct<Partial<IScheConfListModel[]>> = { data: [], total: 0 };
const { state, isLoading, execute } = useAsyncState(() => getScheConfList(form.value), defaultData, {
  immediate: false,
  onSuccess: (data) => {
    state.value = data.code === ResponseCodeEnum.SUCC ? state.value : defaultData;
    total.value = state.value.total || 0;
    console.log('useAsyncState', state.value);
  },
});
console.log('setup函数中', state.value);
onMounted(() => {
  execute()
  console.log('我是挂载后', state.value);
});
onBeforeMount(() => {
  console.log('我是挂载前', state.value);
});

3、放在生命周期钩子中

那能否将useAsyncState函数放在mounted钩子中呢，答案是否定的，原因如下：

不建议将 useAsyncState 函数放在 mounted 钩子中调用。因为 useAsyncState 是一个 Vue 3 的自定义 Hook，它只能在组件的 setup 函数中调用，而不能在其他生命周期钩子函数中使用。

自定义 Hook 是一种抽象逻辑的方式，它通常会与组件的数据和逻辑进行解耦，从而提高代码复用性和可维护性。Vue 3 通过 setup 函数来支持自定义 Hook，这意味着我们可以在 setup 函数中调用自定义 Hook，并将其返回值与组件的数据绑定起来，从而实现特定的功能。

如果你将 useAsyncState 放在 mounted 钩子中调用，会导致以下问题：

1. 违反了 Vue 3 的设计原则。Vue 3 通过 setup 函数来支持自定义 Hook，从而提高代码的可读性、可复用性和可维护性。如果将 useAsyncState 放在 mounted 钩子中调用，就违背了 Vue 3 的设计原则。

2. 导致重复请求。如果将 useAsyncState 放在 mounted 钩子中调用，会使得异步请求每次都会被重新执行。这可能会导致不必要的网络请求和响应延迟，并且会降低页面性能。

3. 难以维护和测试。将 useAsyncState 放在 mounted 钩子中调用，会使得组件的数据和逻辑变得混杂不清。这样会给代码的维护和测试带来困难，并且容易引入错误和 bug。

因此，我们建议将 useAsyncState 函数放在组件的 setup 函数中调用，从而遵守 Vue 3 的设计原则，并能够实现可复用、可维护和高效的异步请求逻辑。