object변수는 ref와 reactive 중 어떤 것으로 선언해야할까
각각의 장단점이 있다 확인해보자

다음과 같은 object가 있다고 가정

const data = { id: 1, title: '제목1', content: '내용1', createdAt: '2023-01-01' }

이 data를 ref로 선언하는 경우

  const form = ref({});
  form.value = { ...data };


  <template>
    <h2> {{ form.id }}</h2>
    ...
  </template>
  • 장점: 손쉬운 객체 할당(reactive에 비해)
  • 장점2: reactive는 object만 가능한 반면 ref는 primitive 변수도 사용 가능하여 일관성이 있다.
  • 단점: 데이터 조회를 위해선 form.value.title과 같이 .value를 붙여야한다

이 data를 reactive로 선언하는 경우

  const form = reactive({});
  form.title = data.title;
  form.content = data.content; 
  //이런식으로 일일이 복사해준다


  <template>
    <h2> {{ form.id }}</h2>
    ...
  </template>
  • 장점: .value를 붙일 필요가 없다. 즉 form.title 이렇게 사용 가능하다.
  • 단점: 객체 할당이 불가능하여 하나하나 필드값을 복사해주어야한다

일반적으로는 일관성을 위해 ref를 더 많이 사용한다는 의견..

참고자료: Vue3 완벽 마스터: 기초부터 실전까지 - “실전편”

Javascript

Frontend

Vue

댓글 쓰기

You may also enjoy

github pages에서 vue router 404 에러

April 03 2023

배경1. vue 프로젝트를 github pages를 통해 myurl.com에 배포를 했다 배경2. vue router를 사용하여 myurl.com/posts 페이지가 있다 배경3. vue router의 history모드는 createWebHistory를 사용한다 myurl.co...

Route

April 01 2023

Route url에 따라 보여줄 vue를 정하자