변수의 반응형에 대해서(Reactive)

<template>  
  <div>
   /* 패턴1 */
   {{ count }} // 반응형변수 ,storeRef로 취득한 값은 반응형을 가진다
  </div>
  <button @click="countUp">
    패턴3 테스트
  </button>
   {{ refCount }}
</template>
<script setup>

// 패턴 2
const { count } = storeToRefs(useStore())
let newCount = count.value
// ↑ 일반변수 = 반응형변수
// 화면 초기화 타이밍에 설정된 count.value를 newCount에 할당한다

// 패턴 3
function countUp(){
    newCount = count.value
    // 일반변수 = 반응형변수
    // countUp이 동작한 타이밍에 설정된 count.value를 newCount에 할당한다 . 그러므로 패턴2의 count.value와 값이 다를수있다
}

// 패턴 4 
const refCount = ref(1)
// 반응형변수 = 일반변수 
refCount.value = 2
// 템플렛의 refCount값을 갱신함. 반응형변수이기때문에

//패턴 5 (중요, 내가 헷갈린 패턴)
const refCount1 = ref(count.value)
// 일반변수 = 반응형변수
// count.value를 변경해도 refCount1은 변경되지 않는다
// ref(count.value)는 화면초기화 타이밍에 설정한 count.value를 refCount1에 설정하기만할뿐 , count.value가 변경된 값을 감시하지 않는다
// 그래서 refCount1.value = 2 등으로는 변경가능하지만 위와 같이 count.value의 변경값을 refCount1에 할당하진 않는다 

</script>

const refCount1 = ref(count.value)
↓
const refCount1 = coumputed(()=>count.value)

위와같이 computed 를 사용하면 해결된다
1.가장 첫번째 computed안의 count.value의 변경을 감시한다
2.변경이 발생한 경우 refCount1에 할당한다
3.computed은 반응형 변수를 반환한다
4.refCount1는 반응형을 유지한다
5.count.value가 변경되는 경우 refCount1가 변경된다 그 후 refCount1을 참조하는 부분이 변경된다

let refCount1 = ref(count.value); 
// 해당 refCount1은 화면초기화 타이밍에만 할당한다
// refCount1를 refCount1.value = 1 등으로 변경하지 않는 이상 안 변한다

watch(() => count.value, (newValue) => {
  // count.value가 변경될 때 refCount1을 업데이트합니다.
  refCount1.value = newValue;
});