Vue.js 인스턴스와 라이프사이클 훅

 

Vue.js instance & lifecycle hook

 

어플리케이션 & 컴포넌트 인스턴스 | Vue.js

라이프사이클 훅

 

🌳인스턴스 

 

🌳메소드 체이닝

Vue.createApp({ count }).mount(#app')

const app = Vue.createapp({})

createApp에 전달된 옵션은 루트 컴포넌트를 구성하는데 사용된다. 

 

🌳최상위 컴포넌트

Root component : 프로젝트를 시작할 때(어플리케이션을 mount할 때) 랜더링이 되는 시작점

 

🌳라이프사이클 훅

Lifecycle hook
beforeCreate	컴포넌트가 생성되기 직전
created	컴포넌트가 생성된 후
beforeMount	HTML 연결되기 전
mounted	HTML 연결된 후

<template>
  <h1>{{ count }}</h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  beforeCreate() {
    console.log('beforeCreate', this.count) //undefined
  },
  created() {
    console.log('created', this.count) // 0
  },
  beforeMount() {
    console.log('beforeMount', document.querySelector('h1')) // null
  },
  mounted() {
    console.log('mounted', document.querySelector('h1')) // <h1>0</h1>
  }
}
</script>

 

 

refs

특정 요소 참조 기능

 

h1의 id hello을 DOM에서 선택하려면 이와 같은 과정을 거쳐야 한다.

mounted() {
  const h1El = document.querySelector('#hello')
}

이를 간소화시켜주는 것이 ref 키워드다. id나 class등 구체적인 선택자가 아니어도 ref만 달아놓으면 언제든지 $refs로 mounted할 수 있다. 특징은 html이 연결된 직후에만 사용할 수 있기 때문에 created 라이프 사이클에서는 당연히 사용할 수 없다.

<template>
  <h1 ref="hello">
</tempalte>
<script>
export default {
  mounted() {
    this.$refs.hello
  }
}
</script>

 

최상위요소 연결

정확하게 refs를 설정하지 않으면 모든 최상위요소를 특정짓게 된다.

 

App.vue

<template>
  <Hello ref="hello" />
</template>
<script>
export default {
  mounted() {
    this.$refs.hello.$refs.good
  }
}
</script>

Hello.vue

<template>
  <h1>Hello~</h1>
  <h1 ref="good">Good</h1>
</template>