인프런 커뮤니티 질문&답변
작성한 질문수
script 태그는 컴포넌트를 처음 가져올때 한번만 실행된다는 게 잘 이해가 안됩니다
작성
·
552
1
컴포넌트를 처음 가져올 때 한 번만 실행되는 일반 <script>와 달리, <script setup>는 컴포넌트의 인스턴스가 생성될 때마다 <script setup>내부 코드가 실행됩니다.
라는 말이 정확하게 이해가 안돼요
<!-- <Component.vue> -->
<template><div>hi</div></template>
<script>
console.log('hi')
export default{
setup(){
console.log(1)
}
}하고
<Component />
<Component />
<Component />
세번 쓰면 hi는 한번만 출력되고 1은 왜 3번 출력되는건가요?
답변 1
1
짐코딩
지식공유자
안녕하세요.
Component.vue 을 import 하는 시점에서 <script></script> 내의 자바스크립트 코드가 실행 됩니다. 이때
console.log('hi')가 출력됩니다.그리고 컴포넌트가 렌더링 되는 시점에 즉,
<Component />사용 시점에 LifeCycle에 의해 setup 함수가 실행되는 것을 확인할 수 있습니다.
아래 그림과 같이 컴포넌트를 세 번 사용, 즉 세번 렌더링 했기 때문에 각 컴포넌트별 setup함수가 호출 됩니다.
