Vue3 無法watch string型態的 prop

在子元件中，若想監看傳入的 props 有無變化時，我們會使用 watch( ) 。但是若 prop 是 primitive type 的時候，會出現下列的錯誤 (以 string為例)

Argument of type 'string' is not assignable to parameter of type 'object'

Table of contents

方法1

原因是 watch( param1, func1) 的第一個參數只吃物件型態，所以無法接受原型 primitive type。正確的寫法要將該 prop 改成 String 物件型，並且要再加上 { immediate: true } 才能監測到值的變化。

const props = defineProps{
  sortString: String;
}()

watch(
  props.sortString,
  () => {},
  { immediate: true }
);

利用函數來監聽

watch( ()=> props.sortString, ()=>{} );