今天來談一些vue的核心概念

Lifecycle&Lifecycle Hooks
Lifecycle:生命週期，每個元件都有一個從「創建 ->使用 ->銷毀」的完整過程。

1. 建立階段(Creation) : 元件被初始化，還沒有資料和模板。

• beforeCreate : 元件剛被建立，但data、props、methods還不能使用。
• created : data、props、methods可以使用，但DOM還沒生成。

2. 掛載階段(Mounting) : 準備好資料和模板，Vue正準備將它渲染到網頁上，onMounted就是在此觸發，這時才能確保元件已經在DOM中了。

• beforeMount : vue開始將模板轉換成虛擬DOM，但尚未渲染到畫面。
• mounted : 元件已被渲染到真實DOM上，可存取ref和操作DOM。
  掛載階段適合操作DOM，第三方套件初始化。

3. 更新階段(Updating) : 元件資料改變，Vue準備更新畫面。

• beforeUpdate : 響應式資料改變，Vue會在更新DOM前呼叫它。
• updated : DOM更新完成，畫面和資料已同步。

4. 卸載階段(Unmounting) : 元件將從網頁上被移除。

• beforeUnmount : 元件即將被銷毀。
• unmounted : 元件被完全移除。

Lifecycle Hooks:中文翻成生命週期鉤子，可以在特定時間點執行特定的函式，這些函式就是vue提供對應的Lifecycle Hooks
onMounted是最常用的Lifecycle Hooks，他保證程式碼執行時，元件的HTML已被渲染到頁面，能夠安全的操作DOM。

Template Refs
Template Refs:模板參考，在Vue開發中，通常不會直接操作DOM，但有時必須這麼做，例如以下這接狀況 :
測量元素的長寬
將元素傳遞給第三方函式庫，像是圖表庫或地圖套件
取得輸入框元素並自動設定焦點(focus(　) )
而在Vue中，模板參考是透過ref( )來實現的

下方提供一個結合生命週期和模板參考的程式範例

<script setup>
import { ref, onMounted } from 'vue';

// 宣告一個模板參考來引用 content-box
const contentRef = ref(null);

// 宣告一個響應式變數來儲存測量結果
const boxHeight = ref(0);

// 在元件掛載後執行
onMounted(() => {
  if (contentRef.value) {
    // 透過 .value 取得 DOM 元素
    // 使用 clientHeight 屬性來取得元素的高度
    boxHeight.value = contentRef.value.clientHeight;
  }
});
</script>

<template>
  <div>
    <h2>內容區塊</h2>
    <div ref="contentRef" class="content-box">
      <p>這是內容。其高度會根據這裡的文字多寡而變動。</p>
      <p>你可以嘗試增加或減少這裡的文字，看看測量的高度是否會跟著改變。</p>
    </div>
    <hr>
    <h3>測量結果</h3>
    <p>此區塊的高度為：{{ boxHeight }} px</p>
  </div>
</template>

<style scoped>  
 .content-box {         //設定.content-box的樣式
  border: 1px solid #ccc;
  padding: 20px;
  max-width: 400px;
}
</style>

const contentRef = ref(null); 創建一個名為contenRef的模板參考，初始值為null
const boxHeight = ref(0); 創建一個響應式變數來儲存測量到的高度，值更新時，<p>標籤中的顯示也會自動更新
onMounted(() => {if (contentRef.value) {boxHeight.value = contentRef.value.clientHeight; }});
這段Lifecycle Hooks是確保裡面的程式碼會在content-box元素被渲染到網頁上後才執行。
contentRef.value 不再是null，而是指向ref="contentRef"這個<div>的真實DOM元素
contentRef.value.clientHeight; 是標準DOM屬性，用來取得元素可見高度
boxHeight.value = 將測量到的高度值給響應式變數boxHeight

好的今天先到這裡，我的腦子也要好好消化今天新的內容
話說終於第十天了，賽程過了三分之一，可喜可賀~
各位明天見囉~