onMountedかonActivatedのどちらかが呼ばれた時に実行されるコンポーザブルを定義

[Hiroshiba]

内容

• onActivatedを不要にする #1886

KeepAliveとうまいこと向き合うプルリクエストです。

onActivatedが必要になってるのは、DOMを使った初期化コードを実行するためです。
なのにonMountedだけ呼ばれることがあるので困っていました。
ということで、初期化コードを実行するべきタイミングを保持しておいて、onMountedかonActivatedで最初に来た方で実行するコンポーザブルを定義してみました。

そもそもコンポーネントが始まる実行順序はこの3通りだけです。

• onMounted→onActivated
  • エディタを初めて開いた時
• onActivatedのみ
  • エディタを2回目に開いた時
• onMountedのみ
  • v-ifで表示された時

これらのタイミングで1回だけ実行されればいいはず。
あとはonDeactivatedあるいはonUnmounedが呼ばれたらプラグをもう一度立てて再実行すればいいはず。

関連 Issue

resolve #1886

close #1888

その他

個人的には #1888 よりもこっちの方がいい気がしてます 😇

[Hiroshiba]

@sigprogramming これで良さそうか、 #1888 のが良さそうか、ちょっとレビューいただけると･･･ 🙇

[sigprogramming]

あまり良くないかもですが、
トークとソングどちらを開いているかをstoreで持って、

<div v-if="songEditorIsOpen">
  <slot></slot>
</div>

をコンポーネント化して、SequencerPitchの表示の切り替えを

<IfSongEditorIsOpen>
  <SequencerPitch v-if="showPitch" />
</IfSongEditorIsOpen>

のようにするという手もあるかも…？

[Hiroshiba]

@sigprogramming
たしかに親コンポーネントでそうやって制御する手もあるかもですね！！
なにか別の謎挙動が起こるかも、とはちょっと思いました。

DOM等を取ってきてみて、ダメっぽかったら次の機会にリトライする、みたいなコードもできるかもです。
ちょっとVueの勉強がてら１回書いてみようと思います！！ 🙇

[Hiroshiba]

@sigprogramming
すみません！　問題直ったと思うので見てもらっても良いでしょうか 🙇 🙇 🙇
（あんま興味なかったら遠慮なくおっしゃってください。。。 🙇 ）

構造は前回コメントいただいたときから変わってないです。
いろいろ試したけど戻ってきた感じです。
onMounted時にDOMがなくてエラーになってると思ってたのですが、DOMはあるけどcanvasWidthが0になってたのが問題だったのでそこ変えただけです！

[Hiroshiba]

なかなかレビューも難しい分野だと思うので、えいやでマージしようかなと思っています！
コンポーネント表示をv-ifで制御し、かつコンポーネント内でonActivatedを使う場合、代わりにこっちを使わないとそこそこレアなケースで問題が起こるという感じです。

あと数日待って特にコメントなければマージしたいと思います 🙏

[Hiroshiba]

マージします･･･！！