reactive로 data변수 선언을 할 때 배열로 하지 않으면
입력했을 때 반응을 하지 않는다는 것을 알 수 있다.
일반 변수처럼 변수 선언을 하고 싶으면 ref를 이용하면 된다.
다음과 같이 반응함을 알 수 있음.
ref와 reactive의 차이점
ref?
- 뷰 템플릿의 DOM 또는 컴포넌트를 가리킨다.
- vue3에서는 reactive reference를 의미한다.
- 객체를 포함한 원시타입 모두 받을 수 있다.
- 반응형이다 (값이 변함에 따라 감지하고 해당 값에 대한 작업 실행)
- 이후 사용을 위해선 하나하나 return 해야한다.
<html> <template> <h1>{{count}}</h1> <h1>{{zzzz}}</h1> </template> <선언> let count = ref(4); let zzzz = ref("asd"); return { count, zzzz } let sum = count.value + 1;
값은 .value를 통해 접근해야함
reactive로 data변수 선언을 할 때 배열로 하지 않으면
reactive?
- 오직 객체만 받는다.
- 받은 객체와 완전히 동일한 객체를 반환한다
- 반응형
- .value가 아닌 변수 자체에 접근해야한다. ( state.counts )
- counts, dobule 등등 하나하나가 ref라고 할 수 있다.
- ref와는 다르게 reactive가 선언된 변수만 리턴하면 된다.
reactive는 기존 뷰 문법의 data 속성 느낌이고, ref는 좀 더 리액티브 속성을 개별적으로 선언하는 느낌.
한 걸음씩 나아가자