언제나 그렇듯 개발자들 문서를 읽어보면 무진장 불친절하다.
뭔가 찾아보면 이것은 반응형(reactive) 종속성에 기반하여 캐시 된다던가, 종속성 관계를 선언적으로 만들었다 같은 그래서 종속성이 뭔데? 그래서 선언적으로 만들었다는 게 뭔데? 같은 처음 접하는 사람들을 전혀 배려하지 않는 글들이 싫어서 정리해보는 글.
1. data
값 담아놓는곳.
아래 예는 count라는 이름으로 4라는 값이 들어있음.
data(){
return{
count: 4,
}
}
2. method
함수 담아놓는 곳.
함수 이름을 호출하면 내부에 적힌 명령어들이 실행됨.
아래 예는 plus()를 실행하면 count의 숫자가 1씩 증가.
data(){
return{
count: 4,
}
},
methods: {
plus() {
this.count++
}
}
3. computed
methods와도 비슷하지만 data의 값을 특정한 조건에 따라 변화(반응형 데이터)하고 싶을 때 사용.
<template>
<div id="computed-basics" class="demo">
<p>출판한 책이 있는가? :</p>
<span>{{ publishedBooksMessage }}</span>
</div>
</template>
<script>
... (생략)
data() {
return {
author: {
name: 'John Doe',
books: ['Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery']
}
}
},
computed: {
publishedBooksMessage() {
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
... (생략)
</ script>
methods처럼 작성하기도 하고, 실질적으로 매번 methods로 정의해서 실행하는 것과 결과는 동일하지만,
computed는 연결되어있는 항목 중 일부가 변경된 경우에만 변화. 즉, author.books 가 변경되지 않는다면 publishedBooksMessage computed 속성에 대해 여러 번 접근하더라도 함수를 다시 실행할 필요 없이 이전에 계산된 결과를 즉시 반환한다.
4. watch
공식 설명
대부분의 경우 computed 속성이 더 적절하지만, 사용자 지정 감시자(watcher)가 필요한 경우도 있습니다.
이는 데이터 변경에 대한 응답으로 비동기 혹은 비용이 많이 드는 작업을 수행하려는 경우가 가장 유용합니다.
methods처럼 함수 형식으로 사용하지만, 함수의 이름을 감시하고 싶은 데이터의 이름으로 작성해 줘야 함.
<template>
<p> {{ count }}</p>
<button @click="plus">버튼</button>
</template>
<script>
...
data() {
return {
count: 0,
}
},
watch: {
count(){ // <-- count가 변화할 때마다 내부의 함수가 실행됨.
console.log('카운터 변했음!')
}
}
...
<script>
watch는 파라미터 값으로 2개까지 지정 가능한데,
첫 번째 파라미터는 변화한 후의 값이, 두 번째 파라미터는 변화 전 값을 담고 있음.
위 예문을 아래와 같이 변경한 후 실행해보면 바로 이해가 됨.
watch: {
count(a, b){
console.log(`변화후= ${a} 변화전= ${b}`);
if ( a%3 === 0 ) {
console.log('3의 배수')
}
}
},