vue tip

라이프 사이클

created : backend 로부터 data를 로딩하기에 적합하다. ajax 는 axios 를 권장한다.
mounted : DOM 요소와 상호작용이 필요한 경우, 레거시 jquery 와 함께 사용하는 경우에 적합하다. mounted 이후에는 updated 라이프 사이클이 호출가능하다.
updated
destroyed

vue animation

class 와 javascript hook을 모두 사용할 수 있다. 따라서 velocity.js 와 같은 서드파티 라이브러리와도 통합가능하다. class 예시

vuex

vuex 를 사용하지 않고, 컴포넌트간 데이터 전달은 다음과 같은 2가지 방법이 있다.

상위컴포넌트의 data를 하위의 prop 으로 등록한다.
이벤트를 사용한다.
- 하위에서 이벤트를 $emit 하여 (optional하게) data를 전달한다.
- 컴포넌트 계층이 깊은 경우, 상하 단방향이 아닌 수평으로 데이터를 전달하기 위해 이벤트 버스를 사용한다.
```
// 공통 scope
const eventBus = new Vue();
// 이벤트 발생하는 컴포넌트 내에서 호출
eventBus.$emit('event', optional_data);
// 이벤트를 듣는 컴포넌트 내에서 호출
eventBus.$on('event', (data) => { });
```

그렇지만, 1은 깊은 계층에서 prop 전달이 너무 많이 일어나는 단점이 있고, 이벤트 버스는 컴포넌트가 많은 경우 마치 그래프처럼 복잡해진다는 단점이 있다. vuex 를 사용하면, data 를 하나의 중앙에서 데이터 허브와 같이 관리하여 이슈를 해결할 수 있다.

Style Guide

Vue tag 는 PascalCase(대문자로 시작하는 UpperCamelCase) 이다. 이유는 javascript 객체로 import 할 때 변수명을 kebab-case 로 받을 수 없고, ES6의 json key value 등록시 편의상 변수만 등록하기 위해서다.

<script>
import TodoList from './components/TodoList.vue'
export default {
  components : {
    TodoList,
  },
}
</script>

import 구문에서는 .vue 확장자를 생략가능하지만, 그래도 확실하게 vue를 밝히기 위해 명시해준다. 예시는 위와 같다.
event $emit 시, 데이터는 가변 인자로 여러개 전달 가능하다. 그렇지만, arrays 또는 json 을 사용해 하나의 data 묶음으로 전달하는 것을 원칙으로 한다.
event 의 이름은 컴포넌트 data 와 동작(CRUD)을 직렬화 한 것으해당 컴포넌트를 쓰는 외부 컴포넌트에서는 해당 javascript UI 라이브러리 코드를 감춘다.

기타로 한다. 분류 기준과 키워드는 css principle을 참고한다. 아래 code snippet의 전체 예시는 여기서 볼 수 있다.

  methods : {
    deleteTask(){
      this.$emit('task-delete', {task, index, });
    }
  }

props 의 모든 요소는 camelCase 로 명시한다. 다만, v-bind:{prop} = "{data}" 로 명시할 때는 prop을 kebab-case 로 명시한다.

Integration With Legacy

우선, vue 기반의 UI 라이브러리를 사용한다. (예 : bootstrap-vue, vuechartjs)
그러나 원하는 javascript UI 라이브러리가 개발자의 application speicific 한 javascript 코드를 요구하고 (일반적인 bootstrap 처럼 dependency 만 정의하면 되는 것이 아닌 경우), jquery 기반과 같이 직접 DOM 에 접근한다면, 해당 라이브러리를 컴포넌트화한다.
컴포넌트 내부에서는 (일반적으로 data나 event listener를 등록하는 경우) mounted 훅에서 해당 라이브러리를 호출해 UI 를 등록하고, 해당 컴포넌트를 쓰는 외부 컴포넌트에서는 javascript UI 라이브러리 코드를 감춘다.

기타

watch
v-bind:key = "{unique_data}"

jjangga0214/vue-tip.md