Vue instance
- 뷰로 개발할 때 필수로 생성해야 하는 코드.
- 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작한다.
Vue instance 생성하기
var vm = new Vue({
// 옵션
})관례적으로 Vue 인스턴스를 참조하기 위해 변수 vm(ViewModel의 약자)를 사용한다.
instance의 속성, API들
new Vue({
el: ,
template: ,
data: ,
methods: ,
created: ,
watch:
});- el : 대상이 되는 html element 혹은 css selector
- template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
- data : 화면을 그리는데 사용하는 data를 반환하는 함수 혹은 data 객체(뷰의 반응성이 반영된 데이터 속성)
- methods : 화면 로직 제어와 관련된 메서드를 정의하는 속성
- created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성(뷰의 라이프 사이클과 관련된 속성)
- watch : data에서 정의한 속성이 변화햇을 때 추가 동작을 수행할 수 있게 정의하는 속성
instance 생성 예시
<html>
<head>
<title>Vue Test</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!'
}
});
</script>
</body>
</html>instance Lifecycle
- Vue 인스턴스의 생성부터 파괴까지의 일련의 과정
Lifecycle hooks
- lifecycle 마다 개발자가 추가한 커스텀 로직
beforeCreate
: 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이플 사이클 단계. 이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없다.
created
- data 속성과 method 속성 정의됨->
this.dataorthis.fetchData()와 같은 로직을 이용해 data 속성과 methods 속성에 정의된 값에 접근할 수 있음. - template 속성에 정의된 돔요소로는 접근 불가(아직 인스턴스가 화면에 부착되기 전이기 때문에)
- data 속성과 methods 속성에 접근할 수 있는 첫 라이프사이클 단계. 컴포넌트가 생성되고나서 실행되는 단계이기 때문에 서버에서 데이터를 요청하여 받아오는 로직을 수행하기에 좋다.
beforeMount
- template 속성에 지정한 마크업 속성을
render()함수로 변환 후 el 속성에 지정한 DOM에 인스턴스를 부착하기 전에 호출되는 단계. render()함수가 호출되기 직전의 로직을 추가하기 좋다.
cf) render() : 자바스크립트로 화면의 돔을 그리는 함수
mounted
- el 속성에서 지정한 화면 요소(DOM)에 인스턴스가 부착되고 나면 호출되는 단계
- template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계
beforeUpdate
- 데이터 관찰, 관찰하고 있는 데이터 변경시 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
- 관찰하고 있는 데이터가 변경되면 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있음
updated
- 데이터 변경 후 가상 돔으로 다시 화며을 그리고 나면 실행되는 단계
- 데이터 변경 후 화면 요소제어와 관련된 로직을 추가하기 좋은 단계
✔ tip
- 가급적이면 데이터 값을 갱싱하는 로직은 beforeUpdate에 추가하는 것을 추천
- 변경 데이터의 화면 요소와 관련된 로직은 updated에 추가하는 것을 추천
beforeDestory
- 뷰 인스턴스가 파괴되기 전에 호출되는 단계, 뷰 인스턴스의 데이터를 삭제하기 좋은 단계
destroyed
- 뷰 인스턴스가 파괴되고 나서 호출되는 단계. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴된다.
개발하는 겨리