vue.js 기초

- computed로 v-if를 더 가독성있게

--> 최종 실행방법은 일반 함수와 동일하지만, 아래와 같은 차이가 존재

- 종속 대상이 변경될 때만 실행

- 캐싱

- watch: 감시자(값의 변동을 감지 - 해당 변수명과 동일한 함수로 선언)

-----------------------------------------

- computed vs watch

--> watch를 남용하지 말자

--> computed: 출력용

--> watch: 출력용 + 다른 함수 실행

- 데이터는 최상위 컴포넌트인 Vue 객체에서 관리하는게 좋다

--> 하위에서는 props로 관리

--> props도 해당 컴포넌트의 property로 바로 저장된다.

순수 js(MVC) ----> Vue.js(MVVM)

- 순수 js에서는 C에서 한번더 DOM을 그려줘야 했다.

- Vue.js는 VM이 이 역할을 해주어, 개발자가 조금 더 데이터, 로직에 신경쓸 수 있게 해줌

- () => {} 는 지양 : this 바인딩 관련

- v-if / v-else 는 새로 렌더링을 하는게 아니라, 동일한 태그는 재사용한다 --> 인풋 입력란 같은 경우 주의!!!!

--> 비슷한 원리로 v-for 사용시  반복되는 부분에 대해 언제나 key라는 속성을 바인딩 시켜줄 것을 권장한다.

- 순수 js의 제한으로 Vue는 2가지 경우를 감지할 수 없음 

--> 인덱스로 배열에 있는 항목을 직접 설정하는 경우 vm.items[indexOfItem] = newValue 

: Vue.set(example1.items, indexOfItem, newValue) 사용 

--> 배열의 길이를 수정하는 경우 vm.items.length = newLength 

: splice 사용