2.Vue Instance 와 속성, 라이프 사이클

개요

• Vue Instance 란 필수적으로 생성해야만 하는 기본적 단위이다.
• Vue Instance 가 DOM Element 에 마운팅 되기 때문에 템플릿 기호에 Vue Instance 에 정의한 data() {} 속성이 적용되는 것이다.
• 보통 정의된 생성자를 통해 new 연산자로 만들어내며 SingleFileComponent 에서는 .vue 파일에 정의된 script 란에 속성을 정의하여 Vue Instance 를 생성해 낸다.
• el, name 처럼 부착될 DOM Element 를 지정하며 이는 Vue가 전역 Component 인지, 지역 Component 인지 판가름하는 중요한 사항이다.
• SingleFileComponent 에서는 export -> import 문으로 Component 를 끌어다쓴다.

인스턴스가 Element 속성에 의해 부착지점을 가진다.

 

---

 

속성

• Vue Instance 생성 시에 생성자에 정의된 내용을 재정의하는 과정이다.
• el : element , DOM Element 에 부착할 지점을 정한다. Vue Instance 가 그려질 지점이다.
• template : 화면에 표시할 Vue Instance 의 DOM Element 들을 정의한다.
• data : Vue의 Reactivity 가 반영된 데이터 속성이다. 
• methods : 화면 동작, 이벤트 로직을 수행하는 메서드의 묶음
• watch : data 에서 정의된 속성 변화 시에 추가 동작을 수행시킨다.

new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});

 

---

 

Life Cycle 

먼저 Vue Instance 생성 시 일어나는 과정을 본다.

• data() {} 속성의 관찰과 초기화 (Reactivity) < beforeCreate ~ created
• template 속성의 코드를 가상 DOM 으로 컴파일 시켜 DOM 으로 변환 < beforeMount
• Vue Instance 를 DOM Element 에 부착 (el, name) < mounted

Life Cycle

• beforeCreate : data, method 속성이 정의되어 있지 않은 상태
• created : data, methods, watch 의 속성처리가 완료되어 접근 가능하기 때문에, 서버에 데이터를 요청하는데 적합하다.
• beforeMounted : template 속성을 render() 로 DOM 으로 만들고 el,name 속성에 정의한 DOM 요소에 부착하기 직전, render() 함수 호출 직전 로직을 수행하는데 적합하다.
• mounted : 인스턴스가 DOM 요소에 부착 된 이후 호출, template 속성에 정의한 요소들에 접근 가능하기 때문에, 화면 요소를 제어하는 로직을 수행하는데 적합하다. $nextTick 사용이 권장 된다.
• beforeUpdate : watch 속성에 의해 인스턴스에서 치환 된 값들이 감시된다.(데이터관찰)  관찰되는 데이터가 변경되고 화면을 다시 그리기 직전 호출, 변경 예정 데이터에 접근가능하다. 데이터 갱신 로직에 적합하다. 하지만, 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지 않는다.
• updated : 변경된 데이터를 보고 화면을 다시 그린 후에 호출, 데이터 변경 후 화면 요소를 제어하는 로직을 수행하는데 적합하다. $nextTick 사용이 권장 된다.
• beforeDestory : 뷰 인스턴스 파괴 직전 호출, 뷰 인스턴스 데이터 삭제에 적합하다.
• destoryed : 뷰 인스턴스 파괴 후 호출, 모든 속성, 모든 하위 인스턴스가 삭제된다.

 

자주 사용되는 Life Cycle

• Created : 인스턴스의 데이터 처리, computed 속성, methods 속성 , watch 속성 처리를 완료 시킴.
• beforeMount : 마운트 되기 전 호출됨, render() 가 호출됨
• Mounted : el 속성에 Vue Instance 가 마운팅 되자마자 호출, this.$nextTick 사용 시 전체가 렌더링 된 상태를 보장시킴
• Destoryed : Vue Instance 제거 후 호출, 모든 디렉티브와 리스너가 제거되고 하위 Vue Instance 도 삭제 된다.

<template>
  <div id="basic">
    {{greeting}}
  </div>
</template>

<script>
export default {
  // Single File Component 에서는 name 속성으로 Component 이름을 정한다.
  name:'basic',
  // Vue Data Must Be Function
  data() {
      // 넘겨줄 데이터는 템플릿 기호에서 Key로 인식한다. 그러므로  Key : Value 를 가진 Object 를 리턴해야만한다.
    return {greeting:'Hello Basic!'}
  },
  // Life Cycle Hooks
  created() {
    // 서버에 데이터 요청
    this.greeting = 'Hello Life Cycle'
  },
  beforeMount() {
    console.log("Call render()")
  },
  mounted() {
    const a = document.getElementById('basic');
    a.setAttribute("style","background-color:green");
    // 값에 변경을 주어 Update 호출시킨다.
    this.greeting = " new Data";
  },
  beforeUpdate() {
    console.log('beforeUpdate')
    // 기존 값을 변경시키는데 적합
    this.greeting = "Update Data"
  },
  updated() {
    // 데이터가 갱신되어 화면이 다시 그려짐.
    const a = document.getElementById('basic');
    a.setAttribute("style","background-color:white");
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('delete')
  }
}
</script>

<style scoped>

</style>