setup 안에서 ref를 콘솔로 찍으면 항상 null이 찍힌다.

문제

<template>에 있는 <section ref=“section”>을 ref 로 가져오는데, 자꾸 null 찍힌다.

=> onMounted() 함수 안에서는 ref 값을 잘 가져온다.

=> setup() 안에 바로 변수를 만들어 할당한 후, section.value를 할당한다.

 

이유

setup()은 라이프 싸이클 중 create 시점에 실행되는데, 그 시점엔 <template>을 읽기 전이다.

아직 <template> html이 읽히지 않았기 때문에 항상 null 이 찍힌다.

 

html DOM 가져오는 <template>는 beforeMount 시점에 데이터를 가져온다.

ref는 mounted 시점에 html 데이터를 가져올 수 있다.

 

=> 데이터 가져오는 시점보다 더 빨리 변수를 선언하니까 항상 null

 

문제 해결

1. setup에 변수를 선언만 해놓고, mount 될 때 데이터를 push해준다.

2. dom을 쓰는 변수만 따로 빼서 관리한다.

현재는 dom 안쓰는 변수와 dom 쓰는 변수가 같은 오브젝트에 있는데, dom 안쓰는 변수는 그대로 setup에 두고, dom 쓰는 변수만 mount에서 처리 한다.

 

Vue3 Life Cycle

 

📌 Vue3에서 setup은 beforeCreate, created 라이프사이클 훅 사이에 실행되는 시점

📌 beforeCreate() => setup() => created() 순으로 호출

📌 setup 내부에서 beforeCreate와 created를 명시적으로 정의할 필요가 없다. setup 내부에 직접 작성하면 된다.

 

 

🫰🏻참고

https://learnvue.co/tutorials/vue-lifecycle-hooks-guide

https://v3.ko.vuejs.org/guide/composition-api-lifecycle-hooks.html