computed 와 methods

computed 와 methods 는 함수를 호출하는 vue 문법중 하나이다.

이 둘의 가장 큰차이는 캐싱의 차이이다.

computed : {
	now(){
    	return new Date();
    }
},

methods : {
	now2(){
    	return new Date();
    }
}

위 코드를 보면 날짜를 실행하는 now(), now2() 두개의 함수가 있다. 이를 컴포넌트에 바인딩에서 살펴보면 now()를 실행했을 때와, now2()를 실행했을 때 확연한 차이가 존재한다.

computed는 해석그대로 계산된 이라는 의미를 가진다. 즉 첫 랜더링을 하면 컴퓨터가 계산해 놓았기 때문에 리랜더링이 발생해도 캐싱된 값을 읽어온다. 랜더링 마다 변화가 생겨야하는 작업이라면 당연히 methods를 사용해야겠지만, 변화가 적은 부분에서 반복적인 랜더링은 자원낭비 일 뿐이다. 이 때 사용하는 것이 computed 방식이다.

이를 공부하면서 자연스럽게 또는 우연히 mapState, mapMutations, mapActions를 알게됬다.

mapState, mapMutations, mapActions

기존 vuex store의 데이터를 가져와서 사용하거나 변화를 주려면 $store.state.name 또는 #store.commit('store mutations에 만든 함수') 또는 $store.dispatch('store actions에 만든 함수')를 사용해야했다.

이런 방식이 귀찬을 경우,mapState, mapMutations,mapActions가 굉장히 편리하다.
방법은 간단하다. 사용하고자 하는 컴포넌트에서 ...mapState(['store에서 만든 함수']) 이런식으로 만들어서 사용하면 된다.

computed :{
	...mapState(['store에서 만든 함수'])
},
methods: {
	...mapMutations(['store에서 만든 함수'])
}

이런식으로 데이터 바인딩해서 사용하면 간편하다.

<template>
  <p> {{name}} {{age}} </P>
 </template>