[vue (electron-vue?)] 의외로created에 쓰인 처리를 호출합니다
6775 단어 Vue.jselectron-vue
제목 상황에 부닥쳐 많은 것을 조사해 보았다.
결론적으로 말하면
vue 어셈블리 A에서 다른 어셈블리 A를 참조·표시할 때
어셈블리 A의 라이프 사이클과 동시에 어셈블리 A의 라이프 사이클도 수행됩니다.
그렇다면
헤어질 것 같아서 반해서...
그러나 이런 생명주기의 다중 집행이 어떤 조건하에서 발생하는지 명확하게 이해할 수 없다.
(electron-vue 자신의 것입니까, 아니면 구성 요소 A'의 작법, 참조하는 방법에 따라 변화합니까)
개발 환경
발생 상황
간단하지만 상황은 이렇다.
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...
출력하면 대부분 자신의 오해를 알아차리기 때문에 쓰는 것이 중요한데...
그냥 에너지를 많이 소모해서...ω`)
Reference
이 문제에 관하여([vue (electron-vue?)] 의외로created에 쓰인 처리를 호출합니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sen-higa/items/c3c92944787da7085d6c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<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의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...
출력하면 대부분 자신의 오해를 알아차리기 때문에 쓰는 것이 중요한데...
그냥 에너지를 많이 소모해서...ω`)
Reference
이 문제에 관하여([vue (electron-vue?)] 의외로created에 쓰인 처리를 호출합니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sen-higa/items/c3c92944787da7085d6c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
처음에 나는 매우 성대하다고 착각했지만, 이 현상의 발생은
Dialog 구성 요소의created에서 특수한 getter를 인용했기 때문인 줄 알았어요.
어떤 getter인지 말하자면, getters에서 루트 Getters를 사용하여 다른 엔클로저에서 참조하는 getter입니다.
나는 언어만으로는 이해하기 어렵다고 생각한다. 다음은 예이다.
const getters = {
hoge: (state, getters, rootState, rootGetters) => {
return rootGetters['store/getter']
}
}
그냥 이건 전혀 상관이 없는데...미안해, 억울해, getters...
출력하면 대부분 자신의 오해를 알아차리기 때문에 쓰는 것이 중요한데...
그냥 에너지를 많이 소모해서...ω`)
Reference
이 문제에 관하여([vue (electron-vue?)] 의외로created에 쓰인 처리를 호출합니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sen-higa/items/c3c92944787da7085d6c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)