reactive와 computed 차이 질문

안녕하세요 !

style에 v-bind 예제 실습시 궁금한 점이 생겨 질문드려요. 선생님이 만드신 예제는

style에 바인딩하는 styleObject를 computed 함수를 작성하여 바인딩하여 예제처럼 fontSize를 조절했습니다.

styleObject를 computed가 아닌 reactive로 작성하면 어떻게될지 궁금해서

const styleObject = reactive({

color : 'red',

fontSize: fontSize.value + 'px';

});

와 같이 작성후 ref함수로 바인딩된 fontSize 크기를 조절하면 computed와 같이 조절이 될 줄 알았으나

조절이 안되는 것을 확인했습니다.

두개 차이점이 무엇이길래 조절이 안되나요?

reactive 매서드를 이용해서 조절할 수는 없나요?

안녕하세요 :)

질문) ref함수로 바인딩된 fontSize 크기를 조절하면 computed와 같이 조절이 될 줄 알았으나 조절이 안되는 것을 확인했습니다.

답변) reactive 함수에 값을 전달시 이 값은 초기값으로 사용됩니다.

const object = reactive({
    fontSize: '14px'
});
// object 반응형 상태에 fontSize 프로퍼티에 단순히 14px 문자열 초기값을 할당함.

아래 코드도 마찬가지로 object 반응형 상태에 object.fontSize 속성에 단순히 14px 문자열 초기값을 할당한 것일 뿐 ref 함수로 선언된 fontSize가 변경 되더라도 object.fontSize는 반응하지 않습니다.

const fontSize = ref(14);
const object = reactive({
    fontSize: fontSize.value + 'px', // 단순히 '14px' 초기값 할당한 것
});

하지만 computed 속성은 함수(콜백함수)내의 반응형 상태가 변경되면 값이 다시 계산되기 때문에 값이 반응하는 것을 확인할 수 있습니다.

const fontSize = ref(14);
const object = computed(() => ({
    fontSize: fontSize.value + 'px',
});
// computed(콜백함수), 콜백함수 내의 반응형 상태가 변경되면 object 값이 다시 계산됩니다.

만약 해당 부분이 헷갈리신다면 [Computed] 해당 강의를 한 번더 보시는 것을 권장드립니다.

(이 답변이면 질문에 대답이 되겠죠? 😄)

감사합니다 🙂

인프런 커뮤니티 질문&답변