(시작하기에 앞서... 인스턴스와 컴포넌트를 다음과 같이 생각하면 좋다.
인스턴스 = 레고를 조립하는 기본 판
컴포넌트 = 레고 블록)
03 - 1 뷰 인스턴스
뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본단위이다.
- 뷰 인스턴스 생성
생성자를 이용해서 뷰 인스턴스를 생성할 수 있다.
new Vue({
el: '#app',
data: {
message: "Hello Vue.js!"
}
})el 속성은 뷰 인스턴스가 그려질 지점을 지정하고(CSS 선택자를 사용),
data 속성은 특정 값(여기선 message)을 정의한다.
- 뷰 인스턴스 옵션 속성
인스턴스를 생성할 때 재정의할 data, el, template 등의 미리 정의되어 있는 속성을 의미한다.
- 뷰 인스턴스의 유효 범위
el 속성에서 지정한 화면 요소와 그 이하 레벨의 화면 요소에 인스턴스에서 정의한 옵션들이 적용될 수 있다.
인스턴스의 유효범위를 벗어나면 그 인스턴스의 옵션들을 인식하지 못하게 된다.
ex)
<div id="app">
</div>
{{ message }}app이란 id를 가지고 있는 div 영역을 벗어난 {{ message }} 는 그대로 출력될 뿐 data에서 정의한 값을 출력하지 못한다.
- 뷰 인스턴스 라이프 사이클
인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다.
크게 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸
4단계로 이루어진다. (갱신은 데이터가 변경되는 경우에만 거치게 된다)
라이프 사이클 예제)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Instance Lifecycle</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
beforeCreate: function() {
console.log("beforeCreate");
},
created: function() {
console.log("created");
},
mounted: function() {
console.log("mounted");
// this.message = "Hello Vue!";
},
updated: function() {
console.log("updated");
}
});
</script>
</body>
</html>
결과)
updated 속성의 함수는 데이터 변경이 일어나 화면이 다시 그려질 때 호출되는 로직이라 호출되지 않았다.
updated의 앞 단계인 mounted에 data 속성의 message 값을 변경하는 코드를 추가(주석 부분)하면 updated 속성 함수도 호출된다.
=> 각 인스턴스 라이프 사이클에 맞춰 원하는 로직을 추가하여 원하는 시점에 실행할 수 있다.
출처 : Do it! Vue.js 입문
'Vue.js' 카테고리의 다른 글
| 03 인스턴스 & 컴포넌트 - 뷰 컴포넌트 통신 (0) | 2022.11.11 |
|---|---|
| 03 인스턴스 & 컴포넌트 - 뷰 컴포넌트 (0) | 2022.11.11 |
| Data Binding (0) | 2022.11.03 |
| v-if, v-show 를 이용한 조건부 렌더링 (0) | 2022.11.03 |
| v-for 를 이용한 리스트 렌더링 (0) | 2022.10.26 |