vue에서 created() 메서드를 사용하는 경우

vue에서 created() 메서드를 사용하는 경우

저는 Vue.js의 라이프 사이클 훅을 배웠습니다만, created() 함수가 사용되는 실제 시나리오는 찾을 수 없었습니다.

created() 함수는 반응성 데이터 및 이벤트에 액세스할 수 있지만 DOM 요소에는 액세스할 수 없습니다.하지만 사실 어떻게 사용하는지 몰라요.Created() 함수가 사용되는 실제 시나리오를 제공할 수 있도록 도와주세요.잘 부탁드립니다.

Vue에서는 글로벌이벤트 버스 패턴을 많이 사용합니다.

https://alligator.io/vuejs/global-event-bus/

이벤트 리스너를 설정하는 페이지의 예는 다음과 같습니다.

EventBus.$on('i-got-clicked', clickCount => {
  console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});

이것은 이 특정 컴포넌트에 대한 DOM 템플릿 렌더링이 완료되기 전에 설정할 수 있는 이벤트입니다.여기서 DOM 템플릿이 완료될 때까지 기다리면 클릭을 놓칠 수 있습니다.당신은 그저 이것을 가능한 한 빨리 하기를 원할 뿐이다.

컴포넌트가 AJAX 요청을 실행할 때와 마찬가지로 항상 DOM이 컴포넌트 렌더링을 완료할 때까지 기다릴 필요는 없습니다.요청을 즉시 실행할 수 있는 경우가 많습니다.그럼 왜 시간을 단축하고 바로 AJAX 요청을 실행하지 않는 거죠?

당신의 안에 있는 모든 것mounted훅으로 DOM이 필요 없고, 훅으로 이동할 수 있습니다.createdVue 라이프 사이클에서 더 빨리 실행되도록 합니다.

vue 사이트의 이 페이지를 참조하십시오.

도표에 따르면:

컴포넌트 템플릿을 작성하기 전에 작성된 메서드가 호출됩니다.따라서 템플릿에 액세스할 수 없지만 템플릿에서 사용해야 하는 값은 변경할 수 있습니다.예를 들어 json 소품을 객체로 변환하거나 구성요소 정적 데이터를 변경할 수 있습니다."mounted"와 "created"의 유일한 차이점은 템플릿을 만들기 전에 성능을 수행할 수 있다는 것입니다.

그러나 생성된 메서드에서 비활성 데이터를 변경하지 마십시오. 데이터가 변경될 때마다 생성된 메서드가 다시 호출되지 않습니다.또, 에 액세스 할 수 없습니다.this.$el창조적인 방법으로

어떤 것을 사용할지, 어떤 것이 필요한지는 고객 자신에게 달려 있습니다.

created() 메서드는 DOM에 의존하지 않는 추가 데이터 초기화를 수행할 수 있습니다.저는 사실 이런 걸 자주 해요.

언급URL : https://stackoverflow.com/questions/52811372/when-to-use-created-method-in-vue