Vue/컴포지션 API
컴포지션 API - 반응형 데이터 (반응성)
IT Blue
2021. 7. 20. 19:11
예제
App.vue
<template>
<h1 @click="increase">
{{ count }}
</h1>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increase() {
this.count += 1
}
}
}
</script>
코드 이해하기
<h1 @click="increase"> {{ count }} </h1>
- 화면에는 count 값 출력, count 초기 값은 0
- count 값을 클릭하면 increase() 메소드 동작
- increase() 메소드는 count 값을 1씩 증가
- count 값이 변하면 화면에 count 값이 변경됨
데이터를 변경하면 화면이 바뀐다 (반응성)
컴포지션 API 리팩토링
App.vue
<template>
<h1 @click="increase">
{{ count }}
</h1>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
let count = ref(0)
function increase() {
count.value += 1
}
return {
count,
increase
}
}
}
</script>
코드 이해하기
- setup() 메소드를 사용해서 컴포지션 API를 사용
- 컴포지션 API 를 활용할때는 반응성을 가지도록 해주기 위해서 ref 라는 기능을 사용, 객체 데이터를 반환한다
- 객체 데이터를 반환 하기 때문에 객체 데이터 내부에 있는 value 라는 속성으로 접근
- 사용하지 않으면 count 값을 클릭해도, count 값은 증가하지만 화면이 변경되지는 않는다