inflearn logo
강의

講義

知識共有

Vue3完全マスター:基礎から実践まで - 「基本編」

テンプレート参照

template내 자바스크립트 표현식 평가 시점은 언제인가요?

解決済みの質問

344

jjkim0222

投稿した質問数 25

0

<template>
  <input ref="input" type="text" />
    <div>{{ input }}</div> 
    <div>{{ input.value }}</div> // 오류난다. 
    <div>{{ $refs.input }}</div>
    <div>{{ input === $refs.input }}</div> // true 
</template>

<script>
import { onMounted, ref } from 'vue';

export default {
  components: {},

  setup() {
    const input = ref(null);
    console.log('setup 내 input.value :', input.value)
    onMounted(() => {
      input.value.value = 'Hello World!';
      input.value.focus();
    });

    return {
      input,
    };
  },
};
</script>

1) 여기서 template 내 JS 표현식은 created 훅 이후 mounted 훅 이전 그 사이에 평가되는 건가요? 혹시 정확한 평가 시점을 알 수 있을까요?

2) 만약에 template 내 JS 표현식이 created 이후에 평가된다면 created 시점, 즉 생성 시점에는 컴포넌트를 생성한다고 했는데 이 컴포넌트를 생성한다라는 게 정확히 뭘 의미하는 건가요?
template 내 JS 표현식 역시 컴포넌트의 일부 아닌가요?

vue.js vuejs

回答 1

0

gymcoding

안녕하세요 :)

1) mounted 전에 랜더링 시점에 평가됩니다. 아래 다이어그램 참고부탁드립니다.

https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram

2) 컴포넌트 인스턴스(this)의 생성을 의미합니다.

npm init vue@3.1.9

0

37

2

크롭 웹스토어 vue devtools 설치 관련

0

39

1

snippets 작성하는 부분 설명이 있었나요?

0

47

2

computed 의 set 함수를 통해 const 변수에 값을 담는 부분

0

52

2

소스 공유 어디서 해야하는지 궁금합니다

0

60

2

component 등록과 사용

0

57

2

강의교안

0

56

2

eslint 룰 관련 질문이 있습니다.

0

64

2

npm init -y 명령어 실행에 관한 질문

0

153

2

volar 가 마켓플레이스에 검색되지 않아 vue(official)을 설치했습니다.

0

167

2

깊은 감시자 질문

0

88

2

정리된 내용

0

153

2

화면이 왜 이렇게 뜨는걸까요?

0

184

2

왜 다르게 뜰까요..?ㅠㅠ

0

155

2

npm init vue , npm create vue@latest 명령 오류

0

289

2

강의를 듣다보니 궁금한 점 질문드립니다.

0

141

2

watch강의 질문

0

153

1

강의 듣다가 질문드립니다.

0

119

1

이벤트 처리 부분 강의 실습

0

140

2

v-pre는 설명이 없나요?

0

152

2

AppCard.vue 만들다 말고 오류가 갑자기 엄청 뜹니다

0

146

1

개발자도구 Vue 탭 관련 문의

0

240

2

강의를 인텔리제이로 수업따라가도 되져?

0

177

2

API 사용시 자동으로 import하는 기능은 어떤것을 설치해야 하나요?

3

276

2