vue를 공부해볼 기회가 생겨 정리해보는 vue와 react

Vue.js란?

• 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크

vue와 React의 공통점

• 가상 DOM을 활용한다.
• 반응적이고 조합 가능한 컴포넌트를 제공한다.
• 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있다.

Vue 인스턴스

• Vue 함수로 새 Vue 인스턴스를 만든다.

var vm = new Vue({
  // 옵션
})

Vue 인스턴스를 생성할 때는 options 객체를 전달해야 한다.

Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성됩니다.

ex)

Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics
      

인스턴스 라이프사이클 훅

• 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거치며, 사용자 정의 로직을 실행할 수있는 라이프사이클 훅도 호출된다. 예를 들어, created 훅은 인스턴스가 생성된 후에 호출됩니다. 예:

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 는 vm 인스턴스를 가리킵니다.
    console.log('a is: ' + this.a)
  }
})

// => "a is: 1"

• 인스턴스 라이프사이클의 여러 단계에서 호출될 다른 훅도 있다. 그 예로 mounted,updated 및 destroyed가 있다. 모든 라이프사이클 훅은 this 컨텍스트가 호출하는 Vue 인스턴스를 가리키며 호출됩니다.