오늘 선배님께서 알려주신 vue에 대한 기본 개념 설명 까묵기 전에 적는거임
내가 이해 제대로 못해서 잘못 적을 수 있음 나중에 고칠 예정

1. vue는 양방향 바인딩이다. 그니까 예를 들면 input에서 value에 상태 저장하고 그 상태를 뭐 onChange라는 상태 변경 함수를 둬서 상태를 변경하고 그래서 그 변경된 상태가 input에 반영되는게 아니다. 그냥 input태그(뷰)에서 상태(모델)을 변경할 수 있는거임. 그리고 모델을 변경하면 뷰도 변경되는거고

2. <script> 태그안에 그냥 냅다 상태(ref)를 console.log 찍었더니 컴포넌트가 마운트 될 때 마다 라이브하게 fresh한 값이 안찍히는거임.
   왜그런가 봤더니 onMounted 함수 안에 console.log 찍어야 컴포넌트가 이제 그려질 때 fresh 하게 상태를 가져와서 찍는거임. 왜냐면 <script>태그안의 코드는...뭔가..뭐 컴포넌트가 다시 보여질 때 마다 실행되는 그런데 아님. 왜냐면 리액트처럼 함수안에 들어있는게 아니라 매번 실행되는게 아닐수도 있고 파일단위니까 뭐..뭔가 이 <script>태그안의 코드가 매번 실행되는게 아닐 수 있다는 거지.

3. watch를 사용하거나 뭐 computed 함수 안에서 값을 찍으면 상태가 변경될때의 값을 잘 추적하면서 찍을 수 있음

위 글 토대로 인공지능으로 한번 다듬음

Vue 기본 개념 정리 (수정/보완 포함)

• 대상: Vue 3 + Composition API
• 핵심 요약: 데이터는 기본적으로 단방향(부모→자식). v-model로 입력 컴포넌트에 한해 국지적 양방향 제공. <script setup> 최상단 코드는 “setup 단계”에 실행되어 초기값이 찍히며, 마운트/변경/DOM 반영 타이밍은 onMounted/watch/nextTick으로 본다.

---

1) 양방향 바인딩 이해

• 정정
  • Vue는 기본적으로 단방향 데이터 흐름.양방향은 입력 컴포넌트 등에서 v-model로 “국지적”으로 제공.
  • :value만 바인딩하면 모델은 안 바뀐다. 이벤트로 값을 넣어줘야 함.

<!-- 국지적 양방향 (권장) -->
<input v-model="name" />

<!-- 단방향 값 바인딩 (모델은 안 바뀜) -->
<input :value="name" />
<!-- 모델 반영하려면 이벤트로 값 업데이트 -->
<input :value="name" @input="e => (name = e.target.value)" />

2) <script setup>에서 콘솔이 “신선하지 않게” 보이는 이유

• 정정
  • <script setup> 최상단은 “컴포넌트 인스턴스 생성(setup)” 때 1회 실행(인스턴스마다). DOM 마운트 전, 비동기 데이터도 오기 전이므로 대개 “초기값”이 찍힘.
  • “마운트 직후의 값”은 onMounted에서.
  • “변경될 때마다”는 watch에서.
  • “DOM 반영 이후”는 await nextTick() 또는 watch(..., { flush: 'post' }).

import { onMounted, watch, nextTick } from 'vue';

onMounted(async () => {
  console.log('[mounted] 상태:', state.value);
  await nextTick();
  console.log('[nextTick] DOM 반영 후 상태:', state.value);
});

watch(state, (n, o) => {
  console.log('[watch] 변경:', o, '→', n);
}, { flush: 'post' }); // DOM 업데이트 이후 타이밍

3) 상태 변화 추적: watch / computed

• 권장
  • computed: 파생 데이터 계산(사이드 이펙트 금지).
  • watch: 상태 변화에 따른 부수효과(로그, 네트워크, DOM 접근).
  • 여러 소스를 함께 추적하려면 배열 소스 사용.
  • 초기 실행도 필요하면 immediate: true.

부록: 타이밍 요약

• <script setup> 최상단: 인스턴스 생성 시 실행(초기값 스냅샷).
• onMounted: DOM 마운트 직후(초기 렌더 이후).
• nextTick: 다음 DOM 업데이트 이후.
• watch(..., { flush: 'post' }): DOM 업데이트 후 콜백 실행.
• onActivated: keep-alive로 다시 활성화될 때.