[Javascript] vue.js computed와 methods

computed 속성과 methods 속성의 차이점

computed => {{ }}	methods = > attribute
1) {{ }}에 작성할 로직이 복잡하면 함수의 return 정의하여 사용(값 바로  >> {{ }} 전달 2) 계산량이 많아 캐시가 필요	1) 이벤트 핸들러 조정 가능 v-on 2) event가 발생 할 때 function () 작동
- 변수를 넣을 수 없음.	- 변수를 넣을 수 있음.

data :  단순한 값
computed : data의 단순한 값에 상태 변환( 사칙 연산 등) 정도면 사용
methods : prameter와 같은 값을 전달 받을 때 사용 

 

methods > computed(사칙연산 등)) > data(메모리 할당 여부에 따라서 갈리는 듯)

 

 

Computed

computed 속성
- {{ mustache }} 를 이용해 HTML element 값이 어떻게 변경되는지 살펴보면서 필요한 연산 작업을 도움

=> 왜 data{ ..., upperCaseMsg : this.originMsg.toUpper(), ... }  안 쓰는가? data에서는 return 돌려줄 수 없기 때문.
   뇌피셜, UI 적으로 data (key)에 정보를 다 넣으면 너무 길어질 꺼 같아서 가독성이 떨어질 수 있다?

 

---

 

이벤트 핸들러 실행과 v-on 디렉티브

v-on 디렉티브

- 뷰에서 발생하는 이벤트를 지켜보면서 DOM  element를 제어할 수 있도록 도와주는 attribute
- 뷰 안에서 사용자가 키보드나 마우스를 제어하는 형식의 이벤트가 발생했을 때 이를 실행하는 함수와 바인딩 할 때 사용

  <button v-on:click="fnChangeTitle">CLICK</button>

 

메소드(Methods);

- 이벤트 핸들러 함수를 제작해야 할 때 미리 정의해 두고 사용
- 뷰 객체의 행위를 정의하는 용도, 즉 로직을 실행하는 함수가 필요할 때 이곳에 정의하여 사용
- 함수의 이름(변수명) => key  // function () { (함수 방정식) } => value

- Vue.js의 return 역할 'this'

a) Methods 안은 객체(함수)는 { } scope 안에 걸리기 때문에 밖으로 나올 수 없어 return 이 필요하기 때문에
b) this : new Vue { } 라는 object를 가리킴
c) this. sTitle(el:'#app' > data : { sTitle : '(값)' }) new Vue { } scope 전체를 가르키고 있기 때문에 여기서 변수 정보를 찾아서 'sTitle 값'을 변경할 수 있다.