Vue Lifecycle 학습정리

Lifecycle Hooks

라이프사이클 훅	설명
beforeCreate	Vue인스턴스가 생성되었지만 데이터관찰, 이벤트 감시가 설정 되기 전에 호출 됨
created	Vue인스턴스가 생성되고 데이터관찰, 계산형 속성, 메서드, 감시의 설정이 끝나면 호출 됨
beforeMount	DOM인 el 요소에 vue 인스턴스가 마운트 되기 전에 호출 됨
mounted	DOM인 el 요소에 vue 인스턴스가 마운트 된 후에 호출 됨
beforeUpdate	가상 DOM이 생성되기 전에 데이터가 변경될때 호출 됨
updated	데이터의 변경으로 인해 가상 DOM이 다시 렌더링된 후에 호출 됨. DOM에 종속성이 있는 계산은 이 단계에서 수행해야 함
beforeDestroy	Vue 인스턴스가 제거 되기 전에 호출 됨
destroyed	Vue 인스턴스가 제거 된 후에 호출 됨

데이터를 가져올 때는 Vue LifeCycle 의 Created() Hook 에서 가져온다

화면이 Refresh 될 때 Created() 함수가 호출된다. (라우터의 :id 만 변경될 경우는 Created() 는 호출되지 않는다)

created() {
  // 컴포넌트 생성시 데이터를 패치한다
  this.fetchData()
},
methods: {
  fetchData () {
    this.post = null
    this.loading = true

    Post.get(this.$route.params.id).then(data => {
      this.post = data
      this.loading = false
    })
  }
}

Uploaded by N2T