반응형 기초 - Vue.js

반응형 상태 설정

• 옵션 API 에서 data 옵션을 사용해 컴포넌트의 반응형 상태를 선언
• Vue는 새 컴포넌트 인스턴스를 만들 때 함수를 호출하고, 반환된 객체를 반응형 시스템에 래핑
• 객체 안의 모든 속성은 해당 컴포넌트 인스턴스에서 최상위에 프록시(proxy)됨
• 해당 컴포넌트 인스턴스 : 매서드 및 생명 주기 훅에서 this
• 나중에 값이 추가되는 인스턴스 속성은 어떠한 값이라도 사전에 선언 필요

let vm = Vue.createApp({
  name: "App",
  data() {
    return {
	    // 인스턴스 속성
    };
  },
}).mount("#app");

⚠️ $ , _ 로 시작하는 이름은 Vue에서 특수한 용도로 사용되고 있으므로 일반 식별자의 시작 문자로 사용하면 안 됨

• 어플리케이션 인스턴스 : Vue.createApp()로 만든 객체
  • 어플리케이션 인스턴스 내에 루트 컴포넌트 인스턴스, 컴포넌트 인스턴스가 트리 구조로 구성

 

---

메서드 선언

컴포넌트 인스턴스에 메서드를 추가하기 위해서 methods 옵션 사용

let vm = Vue.createApp({
  name: "App",
  data() {
    return { 
	    // ...
    };
  },
  methods: {
    메서드() {
      //...
    },
  },
}).mount("#app");

methods 의 this → 컴포넌트 인스턴스를 참조하도록 항상 자동으로 바인딩

⚠️ 화살표 함수는 this 를 컴포넌트 인스턴스로 바인딩하는 것을 방지하므로 주의

 

컴포넌트 템플릿 내에서 접근 가능하며 주로 이벤트 리스너로 사용됨

<button @click="메서드명">{{인스턴스_속성}}</button>

• 중첩된 객체나 배열을 변경하더라도 변경사항이 감지됨
• 반응상태를 변경 → DOM 자동 업데이트
• DOM 업데이트는 동기적으로 적용 ❌