인프런 커뮤니티 질문&답변

<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 표현식 역시 컴포넌트의 일부 아닌가요?