[Vue.js] VUE3 TIP

vue2 대비 가장 큰 변화

composition API 의 사용으로

setup(){} 안에서 로직 처리함

 

* 변수생성 

반응성으로 변경시

단일값 = ref()

= 사용시 .value 
다중값 = reactive({})

= .value 필요없음

// 둘다 템플릿 접근시에는 value 필요없음

 

* computed + getters 

const value = computed(() => store.getters[`moduleName/name`]);

 

* props 

props:{} 로 받고 별도 setup 에서 사용시에는 setup(props){} 로 전달받아서 사용해야함 

props 동작 변경 감지시 하위 컴포넌트에서 computed 로 감싸주어야함.

const value = computed(() => props.data);

 

* 라이프사이클 

on 이 앞에 붙는다.

ex :) onCreated, onMountd, onBeforeMount

const onCreated = async ()=> {

 await 비동기로직() 

}

onCreated();

 

* watch 

watch(감지할데이터, data => {
      value = data;
});

 

* vux 
state : vuex 의 값 모음
getters : state 의 값 get 목적
mutations : state 의 값 set 목적
actions : 비동기처리로직 + 데이터 가공 

actions = store.dispatch('moduleName/Name', value);
mutations = store.commit('moduleName/Name', value);
getters = store.getters['moduleName/Name'];