함수형 Vue

함수형 프로그래밍

로직처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임

• 함수의 실행이 프로그램 실행에 영향을 미치지 않음
• 데이터의 변경이 필요한 경우, 원본 데이터 구조를 변경하지 않고 그 데이터의 복사본을 만들어서 그 일부를 변경하고, 변경한 복사본을 사용해 작업을 진행
• 반복이 for문이 아닌 재귀를 통해 이루어짐 (deep copy) (filter, map, reduce...), 재귀적 코드 스타일은 무한 루프에 빠질 위험

함수형 프로그래밍에서는 함수가 1급 객체가 된다. 1급 객체의 특징은 다음과 같다.

• 변수나 데이터 구조안에 담을 수 있다.
• 파라미터로 전달 할 수 있다.
• 반환값(return value)으로 사용할 수 있다.
• 할당에 사용된 이름과 관계없이 고유한 구별이 가능하다.
• 동적으로 프로퍼티 할당이 가능하다.

 

data : 를 { } 객체형으로 사용하지 않고 함수로 선언해 return 해주는 이유는 컴포넌트간 data가 공유되지 않도록 하기 위해서이다.

<script>
export default {
   data : function(){
      return {}
   }
}
</script>

 

뷰 디렉티브 (v- )

<form> 의 submit 에서 event.preventDefault() 대신 submit.prevent 로 사용할 수 있다.

 

Style Scoped

Style 캡슐화 , 현재 컴포넌트에만 Style 이 적용됨

<style scoped>
	

</style>

 

아래와 같이 변환됨

<style>
    .example[data-v-f3f3eg9] {
      color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>안녕</div>
</template>

 

 

Vuex

mutations -> 동기로직 처리

actions -> 비동기로직 처리

이유 : state 변화 추적위해

 

 

ref

Document.querySelector 는 Document 전체를 탐색해 다른 컴포넌트의 동일한 아이디를 가진 el 을 찾는데 반해

ref 를 사용하면 컴포넌트 내에서만 탐색하여 타 컴포넌트와 ID 가 겹쳐 에러가날 위험을 막는다.

<canvas ref="lineChart"></chart>


this.$refs.lineChart