• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

script 태그는 컴포넌트를 처음 가져올때 한번만 실행된다는 게 잘 이해가 안됩니다

23.01.17 21:04 작성 조회수 424

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함수가 호출 됩니다.

image