Vue 라이프사이클

KHW·2021년 9월 21일

vue

프레임워크

목록 보기

4/43

Vue 라이프사이클 종류

Create

Mount

Update

Destory

🥒 1. Create

1) beforeCreate

data와 이벤트 , 감시자등이 설정되기 전에 호출되는 라이프 사이클 훅

this 접근 불가능 / Dom 접근 불가능

2) created

data, computed, methods, watch 등과 같은 옵션 설정이 완료된 시점이기 때문에, data 등을 사용할 수 있다.

this 접근 가능 / Dom 접근 불가능

🥒 2. Mount

1) beforeMount

컴포넌트가 DOM에 추가 되기 직전에 실행되는 훅

2) Mounted

컴포넌트가 DOM에 추가 된 후 호출되는 라이프 사이클 훅

this 접근 가능 / Dom 접근 가능

🥒 3. Update

컴포넌트에서 사용되는 속성들이 변경되는 등의 컴포넌트가 재 랜더링 되면 실행되는 라이프 사이클 훅

1) beforeUpdate

DOM이 재 렌더링 되기 직전에 호출되는 라이프 사이클 훅

2) updated

DOM이 재 렌더링 된 후 호출되는 라이프 사이클 훅

create / mount 사용하기

<body>

<div id="app">
  <h1>{{msg}}</h1>
</div>
<script>

  //App 변수를 통해 넣는다
  const App = {
    data(){
      return {
        msg : 'Hello Vue!'
      }
    },
  
    //view application이 만들어지기 직전에
    beforeCreate(){
      //this를 통해 data를 다룰 수 없다.
      //app을 생성하기 직전이라 this를 통해 msg에 접근 할 수 없다.
      //활용할 일이 거의 없다.  (데이터 접근 X , 할 수 있는 일이 제한적)
      console.log('beforeCreate',this.msg)
      console.log(document.querySelector('h1'))
    },
  
    //view application이 만들어지기 직후
    created(){
      console.log('Created',this.msg)
      console.log(document.querySelector('h1'))
    },
  
    //view application이 html 구조와 연결 되기 직전
    beforeMount(){
      console.log('beforeMount',this.msg)
      console.log(document.querySelector('h1'))
    },
  
    //view application이 html 구조와 연결 되기 직후
    // html 구조가 연결된 직후에만 querySelector 사용가능
    mounted(){
      console.log('mounted',this.msg)
      console.log(document.querySelector('h1'))
    }

  }

  //application 객체
 const app = Vue.createApp(App)

  // 어떤요소에다가 mount 할 것인가
  // 고유한 id에 하는 것을 추천 class말고
  // viewModel은 app을 통해 반환된 인스턴스이다.
  // 인스턴스의 속성과 메소드를 통해 다양한 것을 사용할 수 있다.
  const vm = app.mount('#app')

</script>
</body>

update 사용하기

<body>

<div id="app">
  <h1>{{msg}}</h1>
</div>
<script>

  //App 변수를 통해 넣는다
  const App = {
    data(){
      return {
        msg : 'Hello Vue!'
      }
    },
    beforeUpdate(){
      console.log('beforeUpdate',this.msg)
      console.log(document.querySelector('h1').textContent)
    },
    updated(){
      console.log('updated',this.msg)
      console.log(document.querySelector('h1').textContent)
    }
  }

  //application 객체
 const app = Vue.createApp(App)

  // 어떤요소에다가 mount 할 것인가
  // 고유한 id에 하는 것을 추천 class말고
  // viewModel은 app을 통해 반환된 인스턴스이다.
  // 인스턴스의 속성과 메소드를 통해 다양한 것을 사용할 수 있다.
  const vm = app.mount('#app')

</script>