Vue 를 참조하십시오.js 생명주기 연결

소개

라이프 사이클 연결은 사용 중인 라이브러리가 막후에서 어떻게 작동하는지 알아보는 창입니다.라이프 사이클 연결을 사용하면 구성 요소가 언제 생성되었는지, DOM에 추가되었는지, 업데이트되었는지, 제거되었는지 알 수 있습니다.
이 문서에서는 Vue 연결 생성, 마운트, 업데이트 및 제거에 대해 설명합니다.js.

선결 조건

이 강좌를 완성하려면 다음이 필요합니다.

익숙한 Vue.js.How To Develop Websites with Vue.js 시리즈를 참조하십시오.

연결 만들기 이해 (초기화)

연결을 만드는 것은 구성 요소에서 실행되는 첫 번째 연결입니다.DOM에 어셈블리를 추가하기 전에 작업을 수행할 수 있습니다.다른 연결과 달리 연결을 만드는 것도 서버 쪽에서 렌더링하는 동안 실행됩니다.
클라이언트 렌더링 및 서버 렌더링 중 구성 요소에 컨텐트를 설정해야 하는 경우 를 사용하여 연결을 만듭니다.
DOM에 액세스하거나 연결 내부의 대상 마운트 요소(this.$el)를 생성할 수 없습니다.

만들기 전

beforeCreate 갈고리는 구성 요소 초기화 시 -data을 실행해도 반응 상태가 아니며 events은 설정되지 않았습니다.
샘플 어셈블리.vue

<script>
export default {
  beforeCreate() {
    console.log('At this point, events and lifecycle have been initialized.')
  }
}
</script>

이 예에서 beforeCreate 연결을 실행할 때 이 코드 세그먼트는 메시지를 기록합니다.

Output
At this point, events and lifecycle have been initialized.

생성됨

created 연결은 템플릿과 가상 DOM을 마운트하거나 표시하기 전에 실행됩니다. - 활성 반응 data 및 events에 액세스할 수 있습니다.
샘플 어셈블리.vue

<template>
  <div ref="example-element">{{ propertyComputed }}</div>
</template>

<script>
export default {
  data() {
    return {
      property: 'Example property.'
    }
  },

  computed: {
    propertyComputed() {
      return this.property
    }
  },

  created() {
    console.log('At this point, this.property is now reactive and propertyComputed will update.')
    this.property = 'Example property updated.'
  }
}
</script>

이 예에서 코드 세그먼트는 property을 Example property으로 저장합니다.created 연결을 실행하면 다음 메시지가 기록됩니다.

Output
At this point, this.property is now reactive and propertyComputed will update.

그런 다음 property을 Example property updated으로 변경합니다.
수명 주기 후기에 {{ propertyComputed }}은 Example property updated이 아니라 Example property으로 표시됩니다.
이 단계에서 연결고리를 만드는 예시를 되돌아보고 생명주기의 다음 부분, 즉 연결고리를 마운트할 준비를 했습니다.

설치 연결 이해(DOM 삽입)

연결 고리를 설치하는 것은 통상적으로 가장 자주 사용하는 연결 고리이다.첫 번째 렌더링 전후에 어셈블리에 즉시 액세스할 수 있습니다.그러나 서버 쪽에서 렌더링하는 동안에는 실행되지 않습니다.
초기 렌더링 전이나 이후에 어셈블리의 DOM에 액세스하거나 수정해야 하는 경우 마운트 연결을 사용합니다.
초기화할 때 구성 요소에 대한 데이터를 가져와야 한다면 마운트 연결을 사용하지 마십시오.
참고: created(또는 created 및 activated을 keep-alive 구성 요소로 변경하십시오.특히 서버 쪽에서 렌더링하는 동안 이 데이터가 필요할 때.

설치 전

beforeMount 갈고리는 템플릿이나 렌더링 함수를 처음 렌더링하기 전에 실행됩니다.
샘플 어셈블리.vue

<script>
export default {
  beforeMount() {
    console.log(`At this point, vm.$el has not been created yet.`)
  }
}
</script>

이 예에서 beforeMount 연결을 실행할 때 이 코드 세그먼트는 메시지를 기록합니다.

Output
At this point, vm.$el has not been created yet.

설치됨

mounted 연결에서 반응 구성 요소, 템플릿 및 렌더링 DOM에 대한 전체 액세스 권한이 있습니다(this.$el 참조).mounted을 사용하여 DOM을 수정합니다. 특히 비Vue 라이브러리를 통합할 때:
샘플 어셈블리.vue

<template>
  <div ref="example-element">Example component.</div>
</template>

<script>
export default {
  mounted() {
    console.log(`At this point, vm.$el has been created and el has been replaced.`);
    console.log(this.$el.textContent) // Example component.
  }
}
</script>

이 예에서 mounted 연결을 실행할 때 이 코드 세그먼트는 메시지를 기록합니다.

Output
At this point, vm.$el has been created and el has been replaced.

이 밖에 Example content.(this.$el.textContent)의 소식을 기록할 것이다.
이 절에서 당신은 연결고리를 설치하는 용례를 탐구했습니다.다음 단계에서는 업데이트 연결을 사용한 예시를 되돌아볼 것이다.

업데이트 연결 이해 (차이 및 렌더링)

구성 요소가 사용하는 수동 속성이 변경되거나 다른 원인으로 인해 다시 렌더링될 때마다 업데이트 연결을 호출합니다.구성 요소에 연결할 수 있는watchcompute 렌더링 주기입니다.
구성 요소가 언제 다시 나타나는지 알고 싶으면 (디버깅이나 분석을 위해서일 수도 있음) 업데이트 연결을 사용하십시오.
구성 요소의 수동 속성이 언제 바뀌는지 알고 싶으면 업데이트 연결을 사용하지 마십시오.computed properties 또는 watchers을 사용하십시오.

업데이트 전

beforeUpdate 갈고리는 구성 요소의 데이터 변경 후에 실행되며, 업데이트 주기가 시작되면 DOM 패치와 다시 나타나기 전에 실행됩니다.
구성 요소를 렌더링하기 전에 구성 요소에 있는 반응 데이터의 새 상태를 얻으려면 beforeUpdate을 사용하십시오.
샘플 어셈블리.vue

<template>
  <div ref="example-element">{{counter}}</div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  beforeUpdate() {
    console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
    // Logs the counter value every second, before the DOM updates.
    console.log(this.counter)
  }
}
</script>

우선, 이 코드 세그먼트는 counter을 0으로 저장합니다.created 연결을 실행하면 counter밀리초 간격으로 1000이 증가합니다. beforeUpdate 연결을 실행하면 이 코드 세그먼트에 메시지가 기록됩니다.

Output
At this point, Virtual DOM has not re-rendered or patched yet.

counter의 번호도 기록했다.

업데이트됨

updated 갈고리가 구성 요소의 데이터를 변경한 후에 실행되고 DOM이 다시 표시됩니다.
속성 변경 후 DOM에 액세스하려면 updated을 사용합니다.
샘플 어셈블리.vue

<template>
  <div ref="example-element">{{counter}}</div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  updated() {
    console.log(`At this point, Virtual DOM has re-rendered and patched.`)
    // Fired every second, should always be true
    console.log(+this.$refs['example-element'].textContent === this.counter)
  }
}
</script>

우선, 이 코드 세그먼트는 counter을 0으로 저장합니다.created 연결을 실행하면 counter밀리초 간격으로 1000이 증가합니다. updated 연결을 실행하면 이 코드 세그먼트에 메시지가 기록됩니다.

Output
At this point, Virtual DOM has re-rendered and patched.

렌더링 값이 현재 값과 같기 때문에 부울 값 true이 기록됩니다.
갱신 연결의 사용을 탐색한 이상 연결을 없애는 것을 배울 수 있습니다.

제거 연결 이해 (분리)

분리 연결을 제거하면 어셈블리가 제거될 때 정리 또는 분석 전송과 같은 작업을 수행할 수 있습니다.구성 요소가 제거되고 DOM에서 제거되면 트리거됩니다.

폐기 전

beforeDestroy은 해체 전에 발사됩니다.구성 요소가 완전히 존재하고 정상적으로 작동합니다.
이벤트 정리 또는 수동 구독이 필요한 경우 beforeDestroy을 사용합니다.
샘플 어셈블리.vue

<script>
export default {
  data() {
    return {
      exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
    }
  },

  beforeDestroy() {
    console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
    // Perform the teardown procedure for exampleLeakyProperty.
    // (In this case, effectively nothing)
    this.exampleLeakyProperty = null
    delete this.exampleLeakyProperty
  }
}
</script>

이 코드 세그먼트는 먼저 exampleLeakyProperty을 저장합니다.beforeDestroy 연결을 실행하면 이 코드 세그먼트에 메시지가 기록됩니다.

Output
At this point, watchers, child components, and event listeners have not been torn down yet.

그리고 exampleLeakyProperty을 삭제합니다.

파괴하다

네가 destroyed에 도착했을 때, 너의 부품에는 거의 아무것도 없었다.그것과 연결된 모든 물건이 파괴되었다.
마지막 분에 원격 서버 구성 요소가 제거되었음을 정리하거나 알려야 하는 경우 destroyed을 사용하십시오.
샘플 어셈블리.vue

<script>
import ExampleAnalyticsService from './example-analytics-service'

export default {
  destroyed() {
    console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
    console.log(this)
    ExampleAnalyticsService.informService('Component destroyed.')
  }
}
</script>

우선, 이 코드 세그먼트는 ExampleAnalyticsService을 가져옵니다.beforeDestroy 연결을 실행하면 이 코드 세그먼트에 메시지가 기록됩니다.

Output
At this point, watchers, child components, and event listeners have been torn down.

구성 요소의 나머지 부분은 컨트롤러에 기록되고 ExampleAnalyticsService은 메시지 Component destroyed.으로 전달됩니다.
이로써 Vue에 대한 전체 검토를 완료했습니다.js 생명주기 연결.

기타 연결

또 두 개의 다른 연결고리가 있는데, activated과 deactivated이다.이것은 keep-alive 구성 요소를 겨냥한 것으로 이 주제는 본고의 범위를 넘어섰다.
이렇게 말하면 <keep-alive></keep-alive> 태그에 봉인된 구성 요소가 언제 열리거나 닫히는지 검사할 수 있습니다.구성 요소에 대한 데이터를 가져오거나 상태 변경을 처리할 수 있습니다. 전체 구성 요소 재구성이 필요하지 않고 created과 beforeDestroy으로 유효합니다.

결론

본고에서 Vue에서 사용할 수 있는 서로 다른 생명주기 연결을 소개합니다.js 실례 생명주기.연결고리를 만들고, 연결고리를 설치하고, 연결고리를 업데이트하고, 제거하는 다양한 용례를 연구했습니다.
Vue에 대한 자세한 내용은js, our Vue.js topic page을 보고 연습과 프로그래밍 프로젝트를 이해합니다.