Vue3のpropsとwatch挙動メモ

miyanokomiya 2021/03/20

props: {
  obj: {
    type: Object,
    default: () => ({ val: 1 }),
  }
  text: {
    type: String,
    default: '',
  }
},
setup(props) {
  watch(() => props.obj, (to, from) => {
    console.log(to === from)
  })
}

こういう状況で、親側はobjを渡さず、textを変更するとwatchが発動する。to === fromはfalse。
defaultがfactoryから再取得されて、値が変わったと見なされている？

Vue2ではそんな挙動ではなかった気がする。

miyanokomiya 2021/03/20

default: { val: 1 },

と書くと同条件でもwatchは発動しない。やはりdefaultのfactoryとwatchの組み合わせが何やら怪しい。

miyanokomiya 2021/03/20

今の時代propsをコンポーネント内で変更しようとする開発者はいないのではないか。factory関数使わなくていい気もする。lintで怒られるか。

miyanokomiya 2021/03/20

jsfiddleでそれっぽく状況作っても再現しなかった。
他にも何か条件があるかもしれない。

見つけたのはここのprops。currentCommandが変化するとdefault値のまま変化していないはずのoriginalViewBoxのwatchが発動する。

miyanokomiya 2021/03/24

再現方法分かった。親側からobjとしてundefined（ref初期値のままなどで）渡していると再現する。
<child :obj="obj" :text="text" />

objを渡していないと再現しない。
<child :text="text" />

issue化。

miyanokomiya 2021/03/26

対応してくれた。done

このスクラップは2021/03/26にクローズされました