반응형 API (Reactivity API)
반응하는 데이터와 관련된 API 세트
코드작성
<template>
<div>
<h2>반응형 메시지</h2>
<p>{{ reactiveMessage }}</p>
<h2>일반 메시지</h2>
<p>{{ normalMessage }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const reactiveMessage = ref('Hellow Reactive Message');
const normalMessage = 'Hellow Normal Message';
return {
reactiveMessage,
normalMessage,
};
},
};
</script>
<style lang="scss" scoped></style>
JavaScript
복사
setup함수 내부에 reactiveMessage와 normalMessage를 선언해서 리턴
reactiveMessage는 ref를 사용
•
확인
이렇게 서버가 돌아가고 있을 것이다.
reactiveMessage 변경
→ 버튼에 v-on:click 이벤트리스너를 달아서 addReactiveMessage함수랑 바인딩
→ addReactiveMessage 함수 정의
→ 반환 값에 addReactiveMessage 추가
•
확인
이렇게 버튼을 클릭하면 계속 !가 추가가 된다.
반응형은 새로 그려진 데이터가 동기화 되고 있다고 추측할 수 있다.
일반 메시지에 함수 추가해보기
반응형에서 테스트한 대로 normalMessage에도 똑같이 적용 해보았다.
•
확인
이렇게 버튼을 눌려도 반응이 없다.
새로 그려진 데이터가 동기화가 안되는 것 같다.
isRef()
isRef() 는 이게 반응형 데이터인지 테스트하는 함수
•
확인
Reactive메시지는 반응형 데이터라 true
Normal메시지는 반응형 데이터가 아니라서 false
라이프 사이클 훅 (Lifecycle Hooks)
vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프 사이클이라고 한다.
다이어그램
setup 함수로 들어와서 사전 작업뒤에 생성이 되고
마운트 되기 전과 되고 난후의 라이프 사이클이다.
LifeCycle Hooks
위의 생명주기 내에서 실행되는 함수를 라이프 사이클 훅이라고 한다.
•
onMounted, onBeforeMount 테스트
라이프 사이클에서 마운드 되었을 때, 마운트 되기 전에 로직을 추가할 수 있다. 테스트 해보자.
•
확인
순서는 setup이 먼저 호출되고, 그담 before 그담 onMounted이다.
•
라이프 사이클
인스턴스나 컴포넌트가 생성될 때, 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프 사이클이라고 한다.
•
라이프 사이클 훅
라이프 사이클 단계에서 실행되는 함수를 라이프 사이클 훅이라고 한다.