Vue

📌 Component 기반 Layout 구성

레이아웃 나누기 >> (terminal) vue create page-layout >>default

vue 파일들은 자신만의 html, style, script를 가지고 있기 때문에, component 별로 독립된 환경을 가지고 개발할 수 있음.

 

 

📌 state, props 란

 

state : 나의 data

props : 누구로부터 받는 data

 

📌data binding (v-model)

Data Binding : vue는 양방향/단방향 데이터 바인딩 다 가능

( vue 인스턴스와 component가 서로 데이터 접근을 하냐에 따라 나뉨  ==>  양방향 - o / 단방향 - x)

 

• 단방향 데이터 바인딩 : v-for 이용하여 리스트 렌더링 >> name,img,link 등등의 요소를 component에서 표시함,

=> vue 인스턴스 값을 component에 준 것 뿐임.

 

• 양방향 데이터 바인딩 : v-model 디렉티브를 이용하여 양방향 데이터 바인딩 지원

v-model 은 state값을 꼭 사용해야됨. props로 내려받은 값을 바로 v-model에서 사용할 수 없음.

ex) 폼을 다루는 것. (Input, checkbox, radiobox,selectbox)

 

📌 computed, watch 의 용도와 차이점

- Computed : 연산결과를 캐싱해줌 // return 有 // data 변경이 없으면 app 컴포넌트가 재호출(=리랜더링, 데이터변경)되어도 함수 재등록x

- Watch : state나 props 를 감시하고 해당 값이 변경되었을 때의 행동을 지정할 수 있음. //return 無

 

둘다 같은 결과(data 변환감지)를 내지만,

watch의 경우에는 값이 언제 바뀔지 모를때, 예측하기 어려울때 많이 사용

ex)비동기통신으로 >>데이터가 1초 뒤인지, 2초 뒤에 올지 모를때 watch를 통해 감시하고 있다가 해당 값에 대한 응답왔을때 후처리

 

computed는 복잡한 연산같은 것을 캐싱처리하기위해 사용.

참조: https://velog.io/@leehaeun0/Vue-method-computed-watch

Simple Vue.js - simpleVue (gitbook.io)