script 태그는 컴포넌트를 처음 가져올때 한번만 실행된다는 게 잘 이해가 안됩니다
668
投稿した質問数 25
컴포넌트를 처음 가져올 때 한 번만 실행되는 일반 <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함수가 호출 됩니다.
props로 함수를 전달했을 때의 질문입니다!
0
632
1
eslint 세팅 질문 드립니다.
0
1711
2
컴포넌트 이벤트 전파 관련 질문입니다
0
498
1
app-level의 provide한 값을 새로고침시 정상적으로 inject하지 못함.
1
526
1
this.$refs에 값이 들어가는 시점이 언제인가요?
0
830
1
npm run dev 설치중
0
617
2
reactive vs ref... 굳이 reactive를 사용하는 이유가 뭔가요?
1
1945
1
dummy api axios 호출시 cors 에러
0
534
1
19:17 emit 관련 질문
0
568
1
reactive로 선언한 반응형 객체 자체를 바꿨는데 watch 콜백함수가 실행이 안되요
0
568
1
자식 컴포넌트에 input 태그, checkbox 같은 form 태그가 없으면 v-model 안 쓰는건가요?
0
577
1
template내 자바스크립트 표현식 평가 시점은 언제인가요?
0
344
1
App.vue 물결 표시 제거 방법
0
374
1
v-if 질문입니다!
0
555
1
ref vs reactive vs shallowRef
0
652
1
이벤트 핸들러로 왜 일반 함수로는 작동이 안 되나요? + console.log도 인식이 안되요
0
343
1
Vue3 Composition API - computed
0
458
1
setup 함수내 문자열 관련 질문입니다.
0
344
2
v-on:click ="" 질문입니다
0
349
1
v-on:click="" 질문입니다
0
234
1
v-for에서 style을 사용하려 할 때
0
373
1
reactive와 computed 차이 질문
0
1108
1
emits사용 이유
1
449
1
eslint 오류표시 질문
0
500
1