Vue3でコードみてもリアクティブ変数への変更が追えない場合に使うなにか

概要

• 通常だったらデバッガ使って追えると思う
• ただ、ターミナルでテストコード実行だとCLIなので、ブラウザ使えなくてdebuggerが動かなーいとかあると思う
• そのときのやつ

これ

  const hogeValue = ref<string>('初期値')
  Object.defineProperty(hogeValue, 'value', {
    get () {
      console.log('Getting value:', hogeValue._value)
      return hogeValue._value
    },
    set (newValue) {
      console.log('Setting value:', newValue)
      console.trace('Value set stack trace')
      hogeValue._value = newValue
    }
  })

変更されたらsetが動作するので、それでスタックトレースが表示されて変更箇所を追えるようになる

そして意図しない変更とデータ構造がミスっていたことに気づきターンエンド！