vue3 hooks碰到的问题

根据项目的需求，需要将获取报表id的方法写成一个hooks，在hooks是否使用监听watch，碰到了一系列的问题。在写hooks的时候，在hooks里面写了监听watch，写了一个响应式的数据，但是在页面上调用找个hooks的，响应式的数据写在setup内一直拿不到。
在此之前需要搞清楚一个问题：

• watch在vue3中是什么时候执行的。

vue2生命周期与vue3生命周期相对比

vue2	vue3
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated
errorCaptured	onErrorCaptured

监听watch在被触发的时候，是在beforeCreate 和created 之间被触发，进行初始化的，而setup在创建组件的时候是在beforeCreate 和created 之前执行的。

最初的写法:

export default async function useReport(busTypeId: any) {
  const route = useRoute();
  const report = ref();
  watch(
    () => busTypeId,
    async () => {
      if (isEmpty(busTypeId) || busTypeId == undefined) {
        busTypeId = route.path.split('/').slice(-1)[0];
      }
      const { createMessage } = useMessage();
      if (busTypeId?.length >= 19) {
        await getReportByBustypeId({ busTypeId })
          .then((res) => {
            report = res.id;
          })
          .catch((err) => {
            createMessage.error('获取信息失败' + err);
          });
      }
    },
    { immediate: true,deep: true },
  );
  return { report };
}

页面引用：

<script lang="ts" setup>
  import useReport from '/@/views/busModel/report/useReport';
  
  const { report } = useReport ();
  console.log(report , 'report report 1');
  /**查询 */
  async function handleQuery() {
    try {
      console.log(report , 'report report 2');
    } catch (e) {
      console.log(e);
    }
  }

</script>

这个时候写的看着也没有问题，但是就是在页面调用的时候无法获取到return出来的数据。在查询事件外边写的打印，打印的时候显示无数据，但是在查询里面写的就有数据。并且将监听事件直接写到页面上时，只有在监听事件内能拿到需要的数据，在外边就拿不到。这就是因为setup的执行是在beforeCreate 和created 之前执行的，而监听watch是在beforeCreate 和created 之间执行的，所以一直拿不到数据。

更改后的写法：

export default async function useReport(busTypeId: any) {
  const route = useRoute();
  const report = ref();
  if (isEmpty(busTypeId) || busTypeId == undefined) {
    busTypeId = route.path.split('/').slice(-1)[0];
  }
  const { createMessage } = useMessage();
  if (busTypeId?.length >= 19) {
    await getReportByBustypeId({ busTypeId })
      .then((res) => {
        report.value = res.id;
      })
      .catch((err) => {
        createMessage.error('获取报表信息失败' + err);
      });
  }
  return { report };
}

页面调用：

<script lang="ts">
  import useReport from '/@/views/busModel/report/useReport';

  const report = ref();
  onMounted(async () => {
    await useReport().then((res) => {
      report.value = res.report.value;
    });
  });
</script>

将监听watch去掉之后，这样就可以拿到想要的数据了。