template내 자바스크립트 표현식 평가 시점은 언제인가요?
<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 표현식 역시 컴포넌트의 일부 아닌가요?
回答 1
0
안녕하세요 :)
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

