Vue 3 中的?setup?函數是一個新的組件選項，用于使用組合式 API 定義組件的邏輯。這個函數的引入是為了解決 Vue 2 中隨著組件復雜度的增長，選項式的 API 可能導致代碼難以維護和理解的問題。通過?setup?函數，開發者可以更加靈活地組織和共享代碼邏輯，提高代碼的可讀性和可維護性。
setup 函數的工作原理
-
執行時機：
setup?函數是組件生命周期中最早執行的函數，它在?beforeCreate?和?created?生命周期鉤子之前調用。這意味著在?setup?函數內部，你無法訪問到組件的實例（this），因為此時組件實例還沒有完全創建。 -
參數：
setup?函數接收兩個參數：props?和?context。props?是組件接收的屬性，它是一個響應式對象，你可以在?setup?函數內部訪問和修改它（但通常不建議直接修改 props）。context?是一個包含了組件的上下文信息的對象，它提供了如?attrs、slots、emit?等屬性的訪問。 -
返回值：
setup?函數應該返回一個對象，這個對象中的屬性和方法將被暴露給組件的模板和其他組合式 API 函數。返回的對象可以包含響應式數據、計算屬性、方法、偵聽器等。 -
響應式系統：在?
setup?函數內部，你可以使用 Vue 3 的響應式 API（如?reactive、ref、computed?等）來創建和管理響應式數據。這些數據在組件更新時將自動更新，無需手動觸發更新。 -
組合邏輯：通過使用?
setup?函數，你可以將相關的邏輯代碼組織在一起，形成一個可復用的函數（也稱為 “composition function”）。這些函數可以接收參數并返回響應式數據和方法，從而在不同的組件之間共享和重用邏輯。 -
與模板的交互：在?
setup?函數中定義的響應式數據和方法可以通過模板中的插值表達式、指令和事件處理器等方式與模板進行交互。這使得開發者可以更加直觀地管理組件的狀態和行為。 -
與其他選項的交互：雖然?
setup?函數是組合式 API 的核心部分，但它并不完全替代了 Vue 2 中的選項式 API。例如，你仍然可以在組件中使用?methods、computed、data?等選項，但這些選項將與?setup?函數中定義的邏輯相互獨立。通常建議在使用組合式 API 時，將盡可能多的邏輯放在?setup?函數中處理。
示例代碼
下面是一個簡單的 Vue 3 組件示例，展示了如何使用?setup?函數：
vue復制代碼
<template> | |
<div> | |
<p>{{ count }}</p> | |
<button @click="increment">Increment</button> | |
</div> | |
</template> | |
<script> | |
import { ref } from 'vue'; | |
export default { | |
setup() { | |
const count = ref(0); // 創建一個響應式引用，初始值為 0 | |
function increment() { | |
count.value++; // 修改響應式引用的值 | |
} | |
// 暴露給模板的響應式數據和方法 | |
return { | |
count, | |
increment, | |
}; | |
}, | |
}; | |
</script> |
在這個示例中，setup?函數創建了一個名為?count?的響應式引用和一個名為?increment?的方法。這些方法通過返回的對象暴露給模板，使得模板可以訪問和響應這些數據和方法。當點擊按鈕時，increment?方法被調用，從而更新?count?的值，并觸發組件的重新渲染。
