在Vue 3中,watch
仍然是一個用于觀察和響應Vue實例上的數據變化的選項。watch
選項接受一個對象,該對象中的屬性對應要觀察的數據屬性,并指定對應的回調函數,用于處理數據變化時的邏輯。
watch
選項的語法如下:
watch: { // 觀察data中的a屬性 a: { immediate: true, // 立即執行回調函數 handler(newVal, oldVal) { // 回調函數邏輯 }, deep: true // 深度觀察嵌套屬性變化 }
}
在watch
對象中,每個屬性表示一個要觀察的數據屬性,可以指定immediate
和handler
屬性。
immediate
:默認為false
。如果設置為true
,則當組件創建時立即執行回調函數。handler
:指定處理函數,當對應的數據屬性發生變化時觸發該函數。回調函數的參數為新的值和舊的值。deep
:默認為false
。如果設置為true
,則表示深度觀察嵌套屬性變化。當數據屬性的值發生變化時,會遞歸地觸發回調函數。
以下是一個示例,演示了如何使用watch
來觀察和響應數據變化:
import { ref, watch } from 'vue'; export default { setup() { const count = ref(0); const increment = () => { count.value++; }; watch(count, (newVal, oldVal) => { console.log(`count changed from ${oldVal} to ${newVal}`); }); return { count, increment }; }
};
在上面的示例中,我們使用ref
創建了一個名為count
的響應式引用,并使用watch
觀察了它的變化。當count
的值發生變化時,回調函數會被觸發,并在控制臺輸出變化前后的值。