Vue Watch

tags: Vue JavaScript

Vue Composition api

watch(() => xxx (newVal, oldVal) => {
	....
}

immediate

immediate 設為 true 可讓監聽值在初始和值被改變時觸發 callback handler 可參考這篇

watch(() => xxx (newVal, oldVal) => {
	....
}, { immediate: true }

deep

當欲觀察值的特性為 call by reference，例如 Object 時，需將 deep 值設定為 true，告知 watch 需要深度觀察。否則會因為特性關係，無法觸發監聽器。 可參考這篇

watch(() => xxx (newVal, oldVal) => {
	....
},{ deep: true }

Vue 3

watch(() => xxx , (newVal, oldVal) => {
  ....
})

多個

watch(() => [xxx, xxx], (newVal, oldVal) =>{
  ....
}