[Vue.js] tutorial - 9. Lifecycle and Template Refs

📍Template Refs

- <template> 블럭 내부의 특정 엘리먼트를 참조해야 할 때 사용

<p ref="pElementRef">hello</p>

- ref에 접근하기 위해 먼저 ref를 어트리뷰트 값과 매칭되는 이름으로 선언해야 한다

const pElementRef = ref(null)

- ref는 null 초기값을 갖는다

- 엘리먼트가 <script setup>이 실행되기 전까지 아직 존재하지 않기 때문이다

- ref는 컴포넌트가 마운트되고 나서부터 접근 가능하다

📍Lifecycle Hook: onMounted()

- 마운트 이후에 코드를 실행한다

import { onMounted } from 'vue'

onMounted(() => {
  // component is now mounted.
})

- Lifecycle hook: 컴포넌트 라이프사이클의 특정 순간에 호출되는 콜백 함수를 인자로 전달

- 이외에도 onUpdated, onUnmounted 등이 있음