1年ぶり2回目のQiita投稿です。お手柔らかにお願いします。
表題の状況に遭遇し、色々調べてわかったことを書きます。
結論から言いますと
あるvueコンポーネントA内で、別のコンポーネントA'を参照・表示する場合、
コンポーネントAのライフサイクルと同時にコンポーネントA’のライフサイクルも実行されていた
という話でした。
分離されるものと思っていたので、結構ハマってしまいました…
ただ、このようなライフサイクルの多重実行が、どういう条件下で起こるのかはまだ明確に理解できていません。
(electron-vue独自のものなのか、コンポーネントA'の書き方、参照の仕方によって変わるのかなど)
開発環境
- Mac OS High Sierra
- vue: 2.5.16
- vue-electron: 1.0.6
発生した時の状況
簡易的ですが、以下のような状況でした。
ComponentAからDialogをダイアログ用のコンポーネントとして使うという感じです。
<template>
<div>
<button @click="showDialog = true">ダイアログ表示</button>
<Dialog v-if="showDialog" @close="showDialog = false"></Dialog>
</div>
</template>
<script>
import Dialog from './Dialog'
export default {
name: 'ComponentA',
components: {
Dialog
},
data () {
return {
showDialog: false
}
}
}
</script>
Dialog.vueに記載したcreatedが呼ばれるタイミングは、
「ダイアログ表示」のボタンを押して実際に表示される時だろう、と思っていました。
ですが、Dialogのcreated内でconsole.log('hoge')してみると、
ダイアログを表示する前からこのhogeが登場。
これにより、２つのコンポーネントのライフサイクルが同時に発動しているようだと理解しました。
どうやって回避したか
今回はライフサイクルが同時に発動することでちょっと不利益があったので、
以下のようにボタンクリックでメソッドを呼び出し、メソッド内で当初Dialogのcreatedに書いていた処理を行うようにしました。
<template>
<div>
<button @click="onClick">ダイアログ表示</button>
<Dialog v-if="showDialog" @close="showDialog = false"></Dialog>
</div>
</template>
<script>
import Dialog from './Dialog'
export default {
name: 'ComponentA',
components: {
Dialog
},
data () {
return {
showDialog: false
}
},
methods: {
onClick () {
// ここにDialogのcreatedに書いてた処理を入れる
this.showDialog = true
}
}
}
</script>
electronじゃないvueのプロジェクトで確認すると…
ついでで確認してみました。
この時のvueはv2.6.11で確認しました。
vue-cliでプロジェクトを作って同じようなコンポーネント構成を用意します。
この場合も同じように同時にライフサイクルが動くのだろう、と思ったのですが、
当初私が期待していたような、コンポーネント毎に分離したライフサイクルの実行になりました
書き方によって変わってくるのか、はたまたelectron-vueでは二重になるのか、、
その辺はまだわからずです…
(この辺でもう疲れ切っているのですごく雑でスミマセン…)
おわりに
最初盛大に勘違いしていたのですが、この現象が発生するのは
Dialogコンポーネント内のcreated内で特殊なgetterを参照していたからだと思っていました。
どんなgetterかといいますと、getters内でrootGettersを使って他のストアモジュールから値を参照するようなgetterです。
言葉だけじゃ限りなくわかりにくいと思うので、以下が例です。
const getters = {
hoge: (state, getters, rootState, rootGetters) => {
return rootGetters['store/getter']
}
}
ただこれは全然関係なかったです…
濡れ衣を着せてしまってごめんよ、getters... 
アウトプットすると大抵自身の勘違いに気付くので、やっぱり書くのは大事ですね…
ただものすごくエネルギーを使います…(ヽ´ω`)