hubring

[Vue] Vue 인스턴스 본문

Javascript/Vue.js

[Vue] Vue 인스턴스

Hubring 2019. 4. 14. 23:37
해당 내용은 Doit! Vue.js 입문 내용을 참고하여 정리하였습니다.

 

Vue 인스턴스 라이프 사이클

[출처] https://kr.vuejs.org/v2/guide/instance.html

 

라이프 사이클 단계 설명

 

1. 인스턴스 생성 (Created)

BeforeCreate : data, methods 속성이 아직 정의되지 않음, 화면 요소에도 접근 불가

Create : data, methods속정이 정의되어 data,methods 속성에 정의된 값에 접근 가능, 화면 요소 접근 불가

-> 서버에서 데이터를 요청하여 받아오는 로직 수행하기 적절

 

2. 생성된 인스턴스 화면에 부착 (Mounted)

BeforeMount : 지정한 화면 요소에 인스턴스를 부착하기 전에 호출, render() 함수가 호출되기 직전의 로직을 추가

Mounted : 인스턴스 부착 후 호출, template 속성에 정의한 화면 요소 접근 가능

-> 화면 요소를 제어하는 로직을 수행하기 적절

 

3. 인스턴스의 내용 갱신 (Update)

Before Update : 관찰 대상 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출,

-> 변경 예정인 데이터에 접근하여 관련 로직 수행하기 적절 (값을 변경하는 로직을 넣더라도 화면에 다시 그려지지는 않음)

Update : 데이터가 변경되고 가상 돔으로 다시 화면을 그림,

-> 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋음.

 

4. 인스턴스 제거 (Destroyed)

Bofore Destroy : 뷰 인스턴스가 파괴되기 직전 호출,  인스턴스에 아직 접근 가능

-> 뷰 인스턴스 데이터를 삭제하기 좋음

Destroyed : 뷰 인스턴스가 파괴된 후 호출, 뷰 인스턴스 접근 불가

 

 

사용 예시

<<!DOCTYPE html>
<html>
  <head>
    <title>Vue Instance Lifecycle</title>
  </head>
  <body>
    <div id="app">
      {{message}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el:'#app',
        data:{
          message : 'Hello Vue.js!'
        },
        beforeCreate: function() {
          console.log("beforeCreate");
        },
        created : function(){
          console.log("created");
        },
        mounted : function(){
          console.log("mounted");
          this.message="Hello Vue!"
        },
        updated : function(){
          console.log("updated");
        }
      });
    </script>
  </body>
</html>

'Javascript > Vue.js' 카테고리의 다른 글

[Vue] Vuex 란?  (0) 2019.05.06
Atom 설치하기  (0) 2019.04.14
[Vue.js] 뷰 개발자 도구 설치  (0) 2019.04.08
'Javascript/Vue.js' Related Articles more