# 前端重要觀念
### 網頁基礎知識

#### HTTP通訊協定
網址(URL)：可連線到特定網路服務的地址，組成為：
- 通訊協定://主機名稱/路徑

通訊協定(Protocol)
主機名稱(Hostname)
路徑(Path)

後端：網路上有伺服器並能24小時運作、提供網路的服務，透過網址，就能連線上去

#### 網站前後端互動基礎
- 在瀏覽器網址列上輸入網址，按下 Enter 取得網頁
- 可以採用 AJAX/XHR 技術執行網址連線、取資料的動作

> 在搜尋匡輸入網址按下enter，到整個畫面都呈現，這之間發生了什麼事？
>
> 瀏覽器IP索取：
> 當你在搜尋框輸入 https://google.com.tw/ 並按下Enter後，瀏覽器會先查找本地的 DNS 快取，檢查是否有先前的 IP 地址解析紀錄。如果找到，則直接返回 IP 地址；如果找不到，則向配置的 DNS 伺服器（例如中華電信的 DNS 伺服器）發送請求。
>
> DNS解析：
> DNS伺服器收到請求後，查詢相應的 IP 地址，並將該 IP 地址返回給瀏覽器。
>
> 瀏覽器向目標網站發送請求：
> 瀏覽器使用獲得的 IP 地址，向 https://google.com.tw/ 發送 HTTP 請求。
>
> 目標網站伺服器處理請求：
> 目標網站的伺服器接收到請求，進行處理。
>
> 伺服器返回網站資源：
> 伺服器返回目標網站的資源，例如 HTML、CSS、JavaScript。
>
> 瀏覽器下載資源、解析、渲染：
> 瀏覽器接收到資源後，開始下載相應的資源，然後解析 HTML、構建 DOM、根據 CSS 進行渲染，如果有 JavaScript，還會執行相應的腳本。
>
> 最終呈現給用戶：
> 最終，瀏覽器將整個網站的內容呈現在使用者的瀏覽器窗口中。

### 生命週期

#### 組件生命週期
- 組件在網頁運作時的重要時機點，對應三個內建的Hooks函式

#### 掛載 onMounted
- 當組件第一次被畫出來，對應的HTML DOM元件也都被創造完成之後

#### 更新 onUpdated
- 當組件因為響應式狀態的變化，完成重新繪製之後

#### 卸載 onUnmounted
- 當組建從畫面上移除完畢之後

#### 使用生命週期 Hooks
載入Hooks，傳入要執行的程式

#### 載入 Hooks
`import{onMounted,onUpdated,onUnmounted} from"vue";`

#### 傳入對應的生命週期觸發時，要執行的函式
onMounted(組件掛載時要執行的函式);
onUpdated(組件更新時要執行的函式);
onUnmounted(組件卸載時要執行的函式);

#### 使用範例
捕捉文字更新的時機點

<script setup>
    import{onUpdated, ref}from "vue";
    onUpdated(function(){
        console.log('組建文字已更新');
    }
    );
    let text=ref('這是一段文字內容');
    let updateText=function(){
        text.value='更新過的文字內容';
    }
</script>
<template>
    <main @click="updateText">
        {{ text }}
    </main>
</template>
<style scopped>
    main{padding:30px 0px}
</style>