Vue 3 API 탐구 1

2021.09.13 - [개발 관련 기록과 정리/Vue 3] - Vue 3 에서의 .vue 구조 분석

/* 
  ref == reactive 두 API는 같음! <-- 비슷하지만 자료형에 따라 사용법이 다름
  ref 는 기본형을 사용할 때 이용
  ractive 는 참조형을 사용할 때 이용
  무조건 변수에 지정 안하면 사용 못함
*/
// ref 를 참조형으로 사용도 가능함. 하지만 '.value'를 통해서 처리하게 됨!
const state = ref({
  list : ['00', '01', '02']
});

const updateState = () => {
  state.value.list = ['10', '11'];
};
/*
// 작동 안함!!!
const updateState = () => {
  state.list = ['10', '11'];
};
*/

// 작동 안함!!!
const name = reactive('front');

ref 와 reactive 는 비슷하지만 자료형에 따라 어떤 것을 사용할 것인가를 정하면 될것 같다.

ref 는 .value 를 붙여서 값을 변경한다. 기존의 자바스크립트를 따르면 기본형에서 따온 것 같다.

reactive 는 위와 같이 추가로 붙여서 값 변경을 하지 않아도 된다. 객체의 값을 변경하던 방식과 동일하다. 그렇기에 참조형 에 적합하다.

그래서 난 결론적으로 reactive 만 쓸렵니다!!!