dearbeany
[Vue] 라이프사이클 | 뷰 인스턴스 옵션(methods, filter, computed, watch) 본문
▪ 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 걸친다.
- 데이터 관찰 설정이 필요한 경우
- 템플릿을 컴파일 하는 경우
- 인스턴스를 DOM에 마운트 하는 경우
- 데이터가 변경되어 DOM을 업데이트 하는 경우 등.
▪ 그 과정에서 사용자 정의 로직을 실행할 수 있는 Life Cycle Hooks도 호출
▪ 4개 파트 (생성, 부착, 갱신, 소멸)로 나뉜다.
▪ 모든 Life Cycle Hooks은 자동으로 this 컨텍스트를 인스턴스에 바인딩하므로 데이터, 계산된 속성(computed) 및 메소드에 접근할 수 있다. (화살표 함수를 사용해 라이프 사이클 메소드를 정의하면 X)
<div id="app">
<div>{{count}}</div>
<button @click="count++">증가</button>
</div>
<!-- 인스턴스의 유효범위가 아님-->
<div>
<div>{{count}}</div>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
count: 0,
};
},
beforeCreate(){
console.log('beforeCreate count : ' + this.count);
},
created(){
console.log('created count : ' + this.count);
console.log('created에 연결된 DOM : ' + this.$el);
},
beforeMount(){
console.log('beforeMount count : ' + this.count);
console.log('beforeMount에 연결된 DOM : ' + this.$el);
},
mounted(){
console.log('mounted count : ' + this.count);
console.log('mounted에 연결된 DOM : ' + this.$el);
},
beforeUpdate(){
console.log('beforeUpdate 호출');
},
updated(){
console.log('updated 호출');
console.log('updated count : ' + this.count);
},
// 파괴는 따로 하지는 않겠다.
});
</script>
- mounted 가 끝났을 때 확실히 연결되었다 (beforeMount때는 연결이 될려고 한다.)
- 증가 버튼 클릭 시 updated를 호출하면서 카운트된다
1. Vue Method
- method 안에 data를 this.데이터이름 으로 접근 (메소드 안의 this는 뷰인스턴스다!)
<div id="app">
<button @click="greet">인사</button>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
msg : "Hello!",
name : "dearbeany"
};
},
methods : {
greet() {
// 메서드 안에서 사용하는 this는 Vue인스턴스이다.
// 템플릿 리터럴
alert(`${this.msg} ${this.name}님`);
},
},
});
</script>- 템플릿 리터럴 방법(문자열끼리 +로 이어주지 않아도 됨)으로 작성
2. Vue Filters
- 필터 : 무언가를 썼을 때 알아서 글자를 필터링 해줌
- 텍스트 형식화를 적용할 수 있는 필터를 지원. {{ }} 구문 또는 v-bind속성에서 사용 가능.
- JS표현식 마지막 '|' 심볼과 함께 추가돼야 함. 체이닝 가능
ⓛ 전역필터 등록 : Vue가 가지는 filter에 등록
<div id="app">
<div>
<input type="text" v-model="msg" />
</div>
<div>
<h3>{{ msg | count1 }}</h3>
</div>
</div>
<script>
Vue.filter(
'count1', (val) => {
if(val.length === 0) return;
return `${val} : ${val.length}자`;
}
)
const app = new Vue({
el: "#app",
data() {
return {
msg : '',
};
},
});
</script>
② 지역필터 : filters 옵션 안에 메소드로 작성. 인스턴스 안에 지역필터로 등록해놨기에 사용 가능
<div id="app">
<div>
<input type="text" v-model="msg" />
</div>
<div>
<h3>{{ msg | count2('입력바람') | count3}}</h3>
</div>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
msg : '',
};
},
filters : {
// 지역필터
count2(val, alternative){
if(val.length === 0) return alternative;
return `${val} : ${val.length}`;
},
count3(val){ // 체이닝 확인
return `${val} 글자`;
}
}
});
</script>
3. Vue Computed
- 특정 데이터의 변경사항을 실시간으로 처리할 수 있음
- 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환
- 이미 변경한 내용을 다시 쓰도록 한다
- method 형식으로 작성하지만 그 결과는 하나의 속성처럼 사용하겠다. (그래서 쓸 때 {{ 메소드 호출X 속성처럼 사용 }})
<div id="app">
<div>
<input type="text" v-model="msg" />
<p>원본 메시지 : {{ msg }} </p>
<p>역순으로 표시한 메시지1 : {{ reversedMsg }} </p>
<p>역순으로 표시한 메시지2 : {{ reversedMsg }} </p>
<p>역순으로 표시한 메시지3 : {{ reversedMsg }} </p>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
msg: '안녕하세요',
};
},
computed : {
reversedMsg(){
console.log('거꾸로 뒤집기');
return this.msg.split('').reverse().join('');
},
},
});
</script>
<div id="app">
<div>
<input type="text" v-model="msg" />
<p>원본 메시지 : {{ msg }} </p>
<p>역순으로 표시한 메시지1 : {{ reversedMsg() }} </p>
<p>역순으로 표시한 메시지2 : {{ reversedMsg() }} </p>
<p>역순으로 표시한 메시지3 : {{ reversedMsg() }} </p>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
msg: '안녕하세요',
};
},
methods : {
reversedMsg(){
console.log('거꾸로 뒤집기');
return this.msg.split('').reverse().join('');
},
},
});
</script>
* computed 와 methods
- 결과적으로 둘 다 최종 결과는 같다.
- computed : 종속 대상을 계산해 저장해놈 (캐싱). 즉, 캐싱을 이용하여 종속된 대상 변경되지 않는 한 computed에 작성된 함수를 여러 번 호출해도 계산 다시 하지 않고 계산되어있는 결과를 반환
- methods : 렌더링 다시 할 때마다 항상 함수를 실행
4. Vue watch
- 지켜보고 있다가 변경되면 그 때 실행한다 (데이터를 감시)
- Vue Instance의 특정 property가 변경될 때 실행할 callback 함수 설정
<div id="app">
<div>
<input type="text" v-model="msg">
<p>원본 메시지: {{msg}} </p>
<p>역순 메시지: {{reversedMsg}} </p>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return {
msg: 'hello',
reversedMsg : '',
};
},
watch: {
msg(newVal){
this.reversedMsg = newVal.split('').reverse().join('');
},
},
});
</script>
* computed와 watch
- computed : 특정 데이터를 직접 사용/가공해 다른 값으로 만들 때 사용
계산해야 하는 목표 데이터를 정의하는 방식으로 SW공학에서 이야기 하는 '선언형 프로그래밍' 방식
- watch : 특정 데이터의 변화 상황에 맞춰 다른 data등이 바뀌어야 할 때 주로 사용.
감시할 데이터 정하고 그 데이터 바뀌면 이런 함수를 실행하라는 방식으로 SW공학 '명령형 프로그래밍 방식'
ES6
var : 재선언 O 재사용 O -> 호이스팅 가능
let : 재선언 X 재사용 O -> 호이스팅 불가
const : 재선언 X 재사용 X -> 호이스팅 불가
Property Shorthand : key와 value가 똑같다면 줄여서 쓰는 거 가능
Concise Method : 객체 안에 메소드 쓸 때
Destructuring : 객체(배열, 객체)에 입력된 값을 개별적인 변수에 할당하는 간편 방식 제공
'Vue.js' 카테고리의 다른 글
| [Vue] Vue Router 라우팅 | router-link와 router-view (0) | 2022.11.02 |
|---|---|
| [Vue] Vue Component 통신 | JS Module | Vue CLI 실행환경 구축 (0) | 2022.11.02 |
| [Vue] 이벤트 핸들링(v-on) | 바인딩(ref, v-bind, v-model) | 뷰 컴포넌트 (0) | 2022.11.02 |
| [Vue] v-bind 디렉티브로 이미지 속성 바꿔보기 (0) | 2022.11.01 |
| [Vue] Vue 옵션(el, data, methods) | 보간법과 디렉티브(v- once, text, bind, html, model, show, for, on) (0) | 2022.10.31 |
