📕 Lifecycle Hooks

📕 Template Refs

  🖊 ref vs reactive

    1. [🏐reactive]

    💡타입제한있음(string,number,boolean 안됨),

    💡object 새로운 값으로 replace안됨

    💡구조분해해서 뭔가를 못함(original값임)

  🖊 keepAlive

📕 Vue concepts

  🖊 class binding

  🖊 Watchers

    1. watch(question, async(nV, oV) => {})

    2. watch(question, async(nV, oV) => {}, deep: true) : React to all changes on an object/array

    3. watch(question, async(nV, oV) => {}, immediate: true) : Run watcher immediately

    4. watchEffect() : 즉시 함수를 실행하고 의존성을 반응적으로 추적, 의존성변경시 다시실행

      1) watch와 차이점: watch(이전값, 현재값), watchEffech(현재값)만 필요, 명시적으로 감시대상을 지정x

const url = ref('https://...')
const data = ref(null)

watchEffect(async () => {
  const response = await fetch(url.value)
  data.value = await response.json()
})

  🖊 computed

📕 Events

  🖊 Component Props & Events

    1. Emits

      1. defineEmits

        [자식컴포넌트]

<script setup>
	const emit = defineEmits(['solved'])
    const check = () => {
    	...
        emit('solved', end-props.start) 또는 템플릿에서
        <input ... @change="$emit('solved', 100)" />
    }
</script>

        [부모컴포넌트]

<script setup>
	const summary = (time) => {
    	dashboard.time += time
    }

	<QuizItem ...@solved="summary" />
</script>

📕 General

  ✨ nextTick()

    1. 개요: Vue가 Dom이 patch될때까지 기다려줌

    2. 예제

watch(
  () => props.isOpen,
  async (isOpen) => {
    if (isOpen) {
      await nextTick(); // 👈 여기!
      activate();
      titleInput.value?.focus();
    } else {
      deactivate();
    }
  },
);

    => (nextTick없을시)titleInput.value는 null이거나 아직 DOM에 없는 상태여서 focus()가 실패함.

📕 +Typescript

📕 상태관리(Pinia)