Day_28:让 Vite 来开启你的Vue之 跌入深坑_生命周期 hooks 与 async/await

Hi Dai Gei Ho~ 我是Winnie ~

在今天的文章中，我们要简单来说说 在 Lifecycle hooks 中使用 async/await 的问题。( 可能此篇文的解释会有点短...)

而在进入正题之前，想先让大家先来一起 code review 下:

下方是一个 可以正常执行且无出现错误 的 请求资料 function (这是我初次实作练习 Vue专案的一段程序码XD)

import { ref, onBeforeMount } from 'vue';
    //略...
    setup(){
     const newsData = ref([]);
     const fetchData = async(url,datas) => {

        const res = await fetch(url).then(res => res.json());
        await res.map( data => datas.push(data));
      }
  
      onBeforeMount(() => {
        fetchData(url, newsData.value);
      })
      //略...
    }

看完不知道大家有没有发现哪里有问题呢？嗯有，写得很奇怪

答案 就是 fetchData()中的 async/await。

我猜 到这边你可能会觉得很奇怪，可能会想说平常我也是都 使用 fetch + async/await 啊！

没事，先别急～因为这是 在 Vue 的 生命周期 hooks 使用 async/await 才会出现的问题。

为什麽呢？

因为 在 生命周期 hooks里 是采取同步执行的，所以在生命周期hooks中 写async/await 也无太大意义，因为生命周期hooks 并不会等到 await 执行完，才执行下一个 周期的hooks。

另外尤雨溪 大大 也提到 生命周期 hooks是不支持 async的，为什麽呢？ 我们可以看看下图：

以上就是针对 生命周期 hooks 与 async/await 的非常简单说明，如有问题欢迎大家多多指教。

-- 无聊小记事 --

今天 是文章倒数第二天..不知道为什麽心情有点起伏..

可能是 发现 平常最没坚持力 的自己 也可以做到...

虽然文章写得不像他人一样这麽精彩（有点心虚、还有点水，错误也有点多XD)

但在参加这活动的过程中，我每天都觉得好像又跨出自己舒适圈的一小步了..

果然还是那句话 『多数的恐惧都还是自己想像出来的，不做永远不知道自己可以』

今天听的是 好乐团 他们说我是没有用的年轻人...