iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 22
1
Modern Web

到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站系列 第 22

【D22 - Dynamic & Async】ㄟ~組件你不要給我亂動!

今天又要講到一些概念了~ 因為昨天我們不小心遇到了兩個好傢伙XD (async, await),所以我們直接開始今天主題吧!

前言

我們會講到:

  1. Dynamic Component 動態組件
    • keep-alive
  2. Async Component 非同步組件
    • async
    • await
    • resolve
    • reject(reason)
    • Promise

動態組件

我們今天想像一下~ 假設我們有兩個組件要呈現,而誰要呈現的根據是看user 點選了哪一個button,那這是上述的code:

第一個組件

\\ components/FirstForm.vue
<template>
  <div>
    <input v-model="name" placeholder="first">
  </div>
</template>
<script>
export default {
  name: "firstForm",
};
</script>

第二個組件

// components\SecondForm.vue
<template>
  <div>
    <input v-model="name" placeholder="second">
  </div>
</template>
<script>
export default {
  name: "secondForm",
};
</script>

APP.vue控制切換兩個不同組件

<template>
  <div id="app">
    <button @click="currentTab = 'first-form'">First form</button>
    <button @click="currentTab = 'second-form'">Second form</button>
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>
<script>
import FirstForm from "./components/FirstForm";
import SecondForm from "./components/SecondForm";
export default {
  name: "App",
  components: {
      FirstForm,
      SecondForm
  },
  data() {
    return {
      currentTab: "first-form"
    };
  }
};
</script>

<keep-alive>

你可以看到我用了一個 <keep-alive></keep-alive> 把components包了起來,假設我們沒有這個keep-alive,那當我們切換到另外一個組件的時候,先前那個組件的資料就會消失。

所以我們用<keep-alive></keep-alive>就可以把裡面的組件建立為永久組件,在原先的component會有所謂的 destroyed機制,但現在就變成了 deactiviated休眠而已。


Asyn 非同步組件

非同步是甚麼概念呢? 首先我們要先了解他的反義詞: 同步是甚麼?

https://www.oxxostudio.tw/articles/201908/js-async-await.html

這張圖應該很清楚了,我們如果想要快點完成program那就要選非同步。
而今天我們可以在async 非同步裡面使用到 await同步的技巧,也就是說他可以等待,等待甚麼? 等待一個 promise物件都resolve解決或著是reject出錯為止。而async結束之後也會返還一個promise,之後就可以接一個 then 來處理後續。

async/ await

所以我們把await包在async裡面,等到一個 await處理完了就會到下一個 await~ 基本架構就是:

async function first(){
  // 先等待second()做完 -> third() -> promise()
  await second();
  await third();
  await new Promise(resolve=>{
  });
}

// then表示在first()之後馬上接著執行
first().then(()=>{});

resolve/ reject

我們先來看一下Vue 的 resolve跟reject基本語法:

Vue.component('async', (resolve, reject) => {
  setTimeout(() => {
    resolve({
      template: '<div>非同步組件</div>'
    });
  }, 3000);
});

理論上這個例子是同步,但因為他用了setTimeout()來模擬非同步情形,也就是三秒之後呼叫 resolve({}),當然我們也可以把resolve 改成reject 這樣你的console就會出現ERROR告訴你從哪裡出錯了,(reject)的地方~

Promise

我們也可以改成Promise,但其實效果是一樣的~

Vue.component('async', () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({
      template: '<div>非同步組件</div>'
    });
  }, 3000);
}));

後記

這幾天都加班到很晚,導致文章很晚出~ 觀看人數少之又少的情況下真的沒甚麼動力完成lol,但是我希望能繼續堅持,手把手教大家怎麼樣完整開發一個網頁!! 大家也要加油~ 辛苦囉~
/images/emoticon/emoticon08.gif


上一篇
【D21 - 用Vue實作網頁】Firebase 幫我存一下資料啦!
下一篇
【D23 - 用Vue實作網頁】Firebase說他還可以幫忙Authenticate?
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30

1 則留言

0
Kevin79
iT邦新手 5 級 ‧ 2020-09-23 20:26:39

ryan 大加油 辛苦ㄌ

ryanyen2 iT邦新手 5 級 ‧ 2020-09-24 16:28:28 檢舉

/images/emoticon/emoticon07.gif
謝謝你這麼捧場~ 精神百倍XDXD

我要留言

立即登入留言