반응형
Vue 인스턴스
- Vue 어플리케이션을 개발하기 위해 Vue 인스턴스를 생성하여 적용합니다.
<head>
<meta charset="utf-8">
<title>Vue.js 인스턴스</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>
</body>Vue.js에서 인스턴스를 생성할 때, data 옵션을 사용하여 데이터를 정의할 수 있습니다.
이때, data 옵션을 정의하는 방식은 두 가지가 있습니다.
- data: {}
위 예제처럼 객체 리터럴을 사용하여 data 객체를 정의하는 방식입니다. 이 방식은 객체 안에 정의된 프로퍼티가 Vue.js의 반응성 시스템에 등록되어, 해당 프로퍼티가 변경될 때마다 화면이 자동으로 업데이트 됩니다. - data() { return {} }
data 옵션을 함수 형태로 정의하는 방식입니다. 이때 함수는 객체를 반환해야 하고, 이 객체 안에 정의된 프로퍼티 역시 Vue.js의 반응성 시스템에 등록됩니다.
차이점은 data 옵션을 함수 형태로 정의하면, 각각의 인스턴스에 대해 새로운 객체를 반환합니다.
일반 객체를 사용하여 정의하게 되면, 모든 인스턴스가 같은 data 객체를 공유하는데, 함수 형태로 정의하는 경우, 다수의 인스턴스를 생성할 때 각각의 인스턴스마다 고유한 데이터를 가질 수 있습니다.
인스턴스 속성
- el: Vue가 실행될 HTML의 DOM 요소를 지정
- data: Vue가 바라보는 data 객체를 지정
- template: 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의
- methods: 화면 로직 제어와 관계된 메서드를 정의, 캐싱이 되지 않고 호출될 때마다 메서드를 실행
- computed: 화면 로직 제어와 관계된 메서드를 정의, 캐싱이 되기 때문에 호출될 때 메서드를 실행하지 않고 캐싱된 값만 반환
- watch: 지정된 변수의 값이 변경되었을 때 정의된 함수를 실행
- create: 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의할 수 있는 속성
⭐computed와 methods 차이
- computed 속성에서 사용되고 있는 data 속성 값이 변경되면 자동적으로 다시 연산 합니다.
- methods 속성은 캐싱 되지 않아 수행할 때마다 연산을 하지만, computed 속성은 data 값이 변경되지 않는 이상 이전의 계산 값을 가지고 있다가(캐싱하고 있다가) 필요할 때 반환해줍니다. 이로인해 반복 수행을 해야하는 경우 computed 속성을 이용하는 것이 성능면에서 좋습니다.
⭐watch 속성
데이터 변화를 감지하여 자동적으로 특정 로직을 수행할 때 쓰입니다.
data 값이 변하면 자동으로 연산하는 computed 속성과 일부분 유사하지만, computed 속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면, watch 속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합합니다.
인스턴스 라이플 사이클
인스턴스 라이플 사이클은 Vue 인스턴스가 생성될 때부터 소멸될 때까지 과정을 생명 주기로 표현한 것입니다.
이때, 인스턴스의 라이플 사이클 동안 각 단계별 로직을 정의할 수 있는데 이를 라이프 사이클 훅이라 합니다.
라이플 사이클 단계
- beforeCreate: 인스턴스가 생성되고, 초기화되기 전에 호출됩니다. 이 단계에서는 인스턴스에 접근할 수 없습니다.
- created: 인스턴스가 생성되고, 초기화된 후에 호출됩니다. 이 단계에서는 인스턴스의 데이터와 메서드에 접근할 수 있습니다.
- beforeMount: 인스턴스가 마운트되기 전에 호출됩니다. 이 단계에서는 Vue.js의 template이 실제 DOM에 부착되기 전의 상태입니다.
- mounted: 인스턴스가 마운트된 후에 호출됩니다. 이 단계에서는 Vue.js의 template이 실제 DOM에 부착되어, 화면에 표시됩니다.
- beforeUpdate: 데이터가 변경되어, 화면이 업데이트되기 전에 호출됩니다. 이 단계에서는 인스턴스의 데이터와 메서드에 접근할 수 있습니다.
- updated: 데이터가 변경되어, 화면이 업데이트된 후에 호출됩니다. 이 단계에서는 실제 DOM이 업데이트되어, 화면에 표시됩니다.
- beforeDestroy: 인스턴스가 소멸되기 전에 호출됩니다. 이 단계에서는 인스턴스에 접근할 수 있습니다.
- destroyed: 인스턴스가 소멸된 후에 호출됩니다. 이 단계에서는 인스턴스의 데이터와 메서드에 접근할 수 없습니다.
Vue.js의 라이프 사이클을 이해하면 라이프 상시클 훅을 통해, 각 단계에서 실행되는 메서드를 활용하여 인스턴스의 상태를 제어하고, 필요한 작업을 수행할 수 있습니다.
반응형
'Front-End > Vue.js' 카테고리의 다른 글
| Vue.js 디렉티브(v-접두사) (0) | 2023.05.11 |
|---|---|
| Vue.js axios를 이용한 HTTP 통신 (0) | 2023.05.11 |
| Vue.js Router로 싱글 페이지 어플리케이션(SPA) 페이지 라우팅 구현 (0) | 2023.05.10 |
| Vue.js 컴포넌트: Props, Emit, Event Bus를 활용한 통신 방법 (0) | 2023.05.10 |
| Vue.js 우편번호 서비스 연동하기 (Daum 우편번호) (0) | 2023.02.15 |