emit、onMounted 和 watch ： Vue 3 中三個不同功能的概念 - 3dw/auto20-next GitHub Wiki

emit、onMounted 和 watch 是 Vue 3 中三個不同功能的概念，它們的應用場景和用途各不相同。讓我們逐一說明它們的差別和用途。

1. emit

用途：

  • emit 用於 父子元件之間的通信，即 子元件向父元件傳遞事件或數據。在 Vue 中，子元件可以通過 emit 發送一個自定義事件，讓父元件來接收並做出相應的處理。
  • 當子元件內部有狀態變化時，可以使用 emit 向父元件發出通知，父元件可以根據這個事件執行某些操作。

用法：

  • 在子元件中使用 emit：

    

    javascript
    

    複製程式碼
    

    export default {
  setup(props, { emit }) {
    const sendMessage = () => {
      emit('message-sent', 'Hello from child!');
    };

    <span class="hljs-keyword">return</span> { sendMessage };

    

    }
}

  • 在父元件中監聽子元件的 emit 事件：

    

    html
    

    複製程式碼
    

    <ChildComponent @message-sent="handleMessage" />

    

    

    javascript
    

    複製程式碼
    

    export default {
methods: {
handleMessage(message) {
console.log('收到來自子元件的消息:', message);
}
}
}

特點：

  • emit 是用來 傳遞事件，通常是子元件將資料或事件通知父元件。
  • 主要用於父子元件的通信，解耦父子元件的交互邏輯。

2. onMounted

用途：

  • onMounted 是 元件掛載後 執行的生命週期鉤子，通常用來初始化元件邏輯，比如 API 請求、DOM 操作 或 設定初始狀態。

用法：



javascript


複製程式碼


import { onMounted } from 'vue';

export default {
setup() {
onMounted(() => {
console.log('元件已掛載');
// 在這裡進行初始化操作，比如 API 請求
});
}
}

特點：

  • onMounted 是 元件掛載後 執行的，它只會觸發一次。
  • 用來 處理元件初始化邏輯，例如加載資料、設定初始值等。

3. watch

用途：

  • watch 是用來 監控響應式數據或 props 的變化，當被監控的數據發生變化時，它會執行相應的回調函數。可以用於監控變量的變化，並做出響應式操作。

用法：



javascript


複製程式碼


import { ref, watch } from 'vue';

export default {
setup() {
const count = ref(0);


<span class="hljs-title function_">watch</span>(count, <span class="hljs-function">(<span class="hljs-params">newVal, oldVal</span>) =&gt;</span> {
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`count 從 <span class="hljs-subst">${oldVal}</span> 變成了 <span class="hljs-subst">${newVal}</span>`</span>);
});

<span class="hljs-keyword">return</span> { count };



}
}

特點：

  • watch 是 監控數據變化，每次數據變化時都會執行回調。
  • 適合用來 處理數據變化引起的副作用，例如計算結果、發送 API 請求等。

差異總結

功能 emit onMounted watch
用途 父子元件之間的通信，子元件向父元件發送事件 元件掛載後的初始化操作 監控響應式數據或 props 的變化，並做出相應回應
觸發時機 子元件需要通知父元件某個事件發生時 元件首次掛載到 DOM 後（僅執行一次） 每當監聽的數據發生變化時
主要用途 子元件通知父元件事件或數據 初始化邏輯，如 API 請求或 DOM 操作 監控數據變化，並對數據變化進行操作
使用場景 子元件觸發父元件執行某個邏輯或更新父元件的狀態 元件初次渲染時設置狀態、進行資料加載等操作 動態監控變量的變化，根據變化來執行邏輯或副作用處理
回調執行次數 根據子元件的事件觸發頻率 只執行一次 每次數據變化都會觸發

具體應用場景的差異：

  1. emit：如果您有一個子元件，它會根據用戶的操作（如點擊按鈕）來觸發一個事件，您可以使用 emit 來通知父元件進行相應處理。例如，子元件中的表單提交按鈕被按下，子元件發出一個 submit 事件通知父元件表單提交已完成。

  2. onMounted：當您想要在元件渲染完成後立即執行某些初始化邏輯時，您會用到 onMounted。例如，當頁面加載時，您需要向伺服器發送請求以獲取數據，這時 onMounted 是合適的。

  3. watch：當您需要監控某個數據變量的變化，並且對變化作出回應時，您應該使用 watch。例如，當使用者在搜尋框中輸入文本時，您可以監控該文本的變化，並根據它來更新顯示的搜尋結果。

⚠️ **GitHub.com Fallback** ⚠️