[Vue.js] 인스턴스

---

애플리케이션 인스턴스

• Vue.createApp() 으로 만든 객체
• 전체 컴포넌트 트리는 인스턴스를 마운트할 때 렌더링

data

• 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용
• 반드시 객체를 리턴하고, Proxy로 래핑

---

계산된 속성

• data, 속성 변경 시 함수 실행으로 캐싱된 값
• 반응형 데이터를 포함하는 복잡한 논리의 경우에 사용

<script setup>
import { reactive, computed } from 'vue'
const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})
// 계산된 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>
<template>
  <p>책을 가지고 있다:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

계산된 속성은 의존된 반응형을 자동으로 추적한다.
그래서 `publishedBooksMessage`의 값이 `author.books`에 의존한다는 것을 알고 있으므로, 
`author.books`가 변경되면`publishedBooksMessage`를 바인딩해 의존하는 모든 것을 업데이트한다.   

메서드

• 인스턴스 직접 호출, 디렉티브 표현식, {{}} 표현식에서 호출 가능
• 이벤트 핸들러로 이용 가능

  methods: { sum() { console.log("## num: " + this.num); 
    let n = parseInt(this.num); 
    if (Number.isNaN(n)) return 0; 
    return (n * (n + 1)) / 2; }, }, })
    .mount("#app");

관찰 속성

• JS 코드에서 데이터가 변경된 경우
• watch 옵션 객체로 정의

  watch: { 
    x(current, old) 
        { console.log(`## x : ${old} --> ${current}`); 
        var result = Number(current) + Number(this.y); 
        if (isNaN(result)) this.sum = 0; 
        else this.sum = result; }, 
    y(current, old) 
        { console.log(`## y : ${old} --> ${current}`); 
        var result = Number(this.x) + Number(current); 
        if (isNaN(result)) this.sum = 0; 
        else this.sum = result; }, }, })
    .mount("#app");

---

Vue 생명주기

---

학습일자: 2025.03.20
참고문헌:

1. ITYL 6기 수업자료
2. https://ko.vuejs.org/guide/essentials/computed
3. https://ko.vuejs.org/guide/essentials/lifecycle