Vue 인스턴스?
Vue에는 절대 인스턴스 개념이 빠질 수 없습니다. 인스턴스는 전역인스턴스와 지역인스턴스가 존재합니다. 해당 개념은 예제를 통해 쉽게 이해 할 수 있어요.
1. 아무 에디터를 키고 index.html을 만들어서 아래의 코드를 삽입 하고 실행 시켜주세요
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<meta charset="utf-8" />
</head>
<body>
<div id="pooney">
{{testMessage}}
<button v-on:click="testClick()">클릭</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el : '#pooney',
data : {
testMessage : '안녕하세요 pooney입니다.'
},
methods : {
testClick () { alert('클릭한 pooney입니다.')}
}
})
</script>
</body>
</html>
2. 아래와 같은 화면이 등장할것입니다. "안녕하세여 pooney입니다" 가 출력 될 것입니다.
3. 또한 아래와 같이 클릭버튼을 클릭하면 alert 창이 노출될 것입니다.
4. new Vue{()} 라는 생성자를 통해 정의한 testMessage의 텍스트가 {{testMessage}}에 정확하게 출력되고 버튼을 클릭하면 해당 메소드가 실행되면서 정의한 alert가 호출되는 것을 확인 할 수 있습니다. 눈치 채셨 겠지만 new Vue{()} 가 지역 Vue 인스턴스를 생성하는 부분이고. 해당 Vue 인터턴스가 해당 id를 가진 돔요소에 붙어서 해당 내용을 출력을 하게 된것입니다. 생성자에 정의 할 수 있는 내용들은 el, data, method, life 사이클에서 호출될 메소드... 등 다양한것을 정의 할 수 있습니다.
| el | 해당 id를 가진 돔요소를 지정 |
| data | 해당 id를 가진 돔요소에 삽입할 데이터를 정의 |
| methods | 해당 id를 가진 돔요소에서 호출될 method 정의 |
| lifecycle | vue 인스턴스가 라이프 사이클에 따른 호출될 내용 정의 |
5. 이러한 Vue 인스턴스가 화면에 뿌려지는 과정은 아래와 같습니다.
인스턴스 객체가 생성 -> 특정 돔요소에 인스턴스가 붙음 -> 인스턴스에서 정의한 내용이 돔요소에 출력된다. -> 사용자는 변환된 내용봄.
그렇다면 Vue 인스턴스는 아무데나 붙이면 되는냐?
<div id="pooney">
{{testMessage}}
<button v-on:click="testClick()">클릭</button>
</div>
{{testMessage}}
No! 입니다 아래와 같이 이러한 인스턴스에는 유효범위가 존재합니다. 인스턴스를 정의할때 el 부분을 보면 특정 돔요소에만 적용이 될 것이라는 것을 알 수 있습니다. 때문에 해당돔요소를 벗어나면 아무런 작용을 하지 않습니다.
자 그러면 el, data, method는 알겠는데 그렇다면 lifecycle은 무엇인지 궁금 하 실 것입니다.
lifecycle
인스턴스의 라이프사이클은 beforCreated, created, beforeMount, mounted, beforeUpdate, updated , beforeDestroy, destroyed 총 8개의 단계를 가지고 있습니다.
beforeCreate
인스턴스가 생성되고 나서 가장 처음으로 실행되는 사이클입니다. 아직 data ,method가 없기 때문에 화면요소에 접근 할 수가 없습니다.
created
data, methods 정의 되어 있어 해당 인스턴스내에 데이터에는 접근 가능하지면 돔요소에는 접근 불가능합니다. 때문에 초기화할 데이터를 정의하고자 할때 사용합니다.
beforeMount
돔요소에 인스턴스가 부착되기전에 호출됩니다.
mounted
돔요소에 인스턴스가 부착되고 호출됩니다.
beforeUpdate
뷰는 돔요소의 데이터를 감시하고 있는데(반응성) 해당 내용이 변경되기전에 호출이됩니다. 어떠한 값을 치환하고자 주로 사용합니다.
update
데이터가 변경되고 나서 호출됩니다. 필요에 따라서 computed, watch를 주로 사용하는데 이부분은 나중에 설명하겠습니다.
beforeDestory
뷰 인스턴스가 파괴되기 전에 호출됩니다. 아직 파괴 되지 않았으니 인스턴스의 데이터에는 접근이 가능합니다.
destory
뷰 인스턴스가 파괴되고 나서 호출됩니다.
<!DOCTYPE html>
<html>
<head>
<title>제목</title>
<meta charset="utf-8" />
</head>
<body>
<div id="pooney">
{{testMessage}}
<button v-on:click="testClick()">클릭</button>
</div>
{{testMessage}}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el : '#pooney',
data : {
testMessage : '안녕하세요 pooney입니다.'
},
methods : {
testClick () { alert('클릭한 pooney입니다.')}
},
beforeCreate(){
console.log("pooney beforCreated 호출")
},
created(){
console.log("pooney created 호출")
},
beforeMount(){
console.log("pooney beforeMount 호출")
},
mounted(){
console.log("pooney mounted 호출")
},
beforeUpdate(){
console.log("pooney beforeUpdate 호출")
}
})
</script>
</body>
</html>
위와 같이 호출 하면 아래와 같이 로그가 출력되는것을 확인 할 수 있습니다. 로그가 출력안되는 부분은 단계가 이루어지지 않아서 출력이 안되는 것이니 환경을 만들어서 테스트 하시면 됩니다.
이렇게 Vue 인스턴와 라이프 사이클에 대하여 간단하게 설명했습니다. 꼭 한번 연습해보세요
'Vue' 카테고리의 다른 글
| [Vue] 부모 자식 간에 created, mounted 순서 (1) | 2021.10.25 |
|---|---|
| [Vue] Vue 컴포넌트란 -3? (0) | 2021.03.01 |
| [Vue] Intellj에서 Vue.js 프로젝트 생성하기 -1 (0) | 2021.03.01 |
