[vue (electron-vue?)] 의외로created에 쓰인 처리를 호출합니다

6775 단어 Vue.jselectron-vue
Qiita 투고는 1년 만에 두 번째다.사정을 봐주십시오.
제목 상황에 부닥쳐 많은 것을 조사해 보았다.

결론적으로 말하면


vue 어셈블리 A에서 다른 어셈블리 A를 참조·표시할 때
어셈블리 A의 라이프 사이클과 동시에 어셈블리 A의 라이프 사이클도 수행됩니다.
그렇다면
헤어질 것 같아서 반해서...
그러나 이런 생명주기의 다중 집행이 어떤 조건하에서 발생하는지 명확하게 이해할 수 없다.
(electron-vue 자신의 것입니까, 아니면 구성 요소 A'의 작법, 참조하는 방법에 따라 변화합니까)

개발 환경

  • Mac OS High Sierra
  • vue: 2.5.16
  • vue-electron: 1.0.6
  • 발생 상황


    간단하지만 상황은 이렇다.
    ComponentA에서 대화상자의 구성 요소로 Dialog를 사용하는 느낌입니다.
    ComponentA.vue
    <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에서 작성한 처리를 할 수 있습니다.
    ComponentA.vue
    <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에서 루트 Getters를 사용하여 다른 엔클로저에서 참조하는 getter입니다.
    나는 언어만으로는 이해하기 어렵다고 생각한다. 다음은 예이다.
    const getters = {
      hoge: (state, getters, rootState, rootGetters) => {
        return rootGetters['store/getter']
      }
    }
    
    그냥 이건 전혀 상관이 없는데...
    미안해, 억울해, getters...
    출력하면 대부분 자신의 오해를 알아차리기 때문에 쓰는 것이 중요한데...
    그냥 에너지를 많이 소모해서...ω`)

    좋은 웹페이지 즐겨찾기