728x90

1. beforeCreate

인스턴스가 막 초기화된 후.
Called synchronously immediately after the instance has been initialized, before data observation and event/watcher setup.

2. created

인스턴스가 막 만들어진 후.
Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the $el property will not be available yet.

3. beforeMount

마운트되기 바로 전.
Called right before the mounting begins: the render function is about to be called for the first time.

This hook is not called during server-side rendering.

4. mounted

마운트된 후.
Called after the instance has been mounted, where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called.

Note that mounted does not guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use vm.$nextTick inside of mounted:

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

5. beforeUpdate

DOM에 변화된 데이터가 붙기 전.
Called when data changes, before the DOM is patched. This is a good place to access the existing DOM before an update, e.g. to remove manually added event listeners.

This hook is not called during server-side rendering, because only the initial render is performed server-side.

6. updated

DOM에 변화된 데이터가 붙은 후.
Called after a data change causes the virtual DOM to be re-rendered and patched.

The component’s DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here. However, in most cases you should avoid changing state inside the hook. To react to state changes, it’s usually better to use a computed property or watcher instead.

Note that updated does not guarantee that all child components have also been re-rendered. If you want to wait until the entire view has been re-rendered, you can use vm.$nextTick inside of updated:

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

This hook is not called during server-side rendering.

7. activated

Called when a kept-alive component is activated.

This hook is not called during server-side rendering.

8. deactivated

Called when a kept-alive component is deactivated.

This hook is not called during server-side rendering.

9. beforeDestroy

인스턴스가 destroyed되기 전.
Called right before a Vue instance is destroyed. At this stage the instance is still fully functional.

This hook is not called during server-side rendering.

10. destroyed

인스턴스가 destroyed된 후
Called after a Vue instance has been destroyed. When this hook is called, all directives of the Vue instance have been unbound, all event listeners have been removed, and all child Vue instances have also been destroyed.

This hook is not called during server-side rendering.

11. ErrorCaptured

Called when an error from any descendent component is captured. The hook receives three arguments: the error, the component instance that triggered the error, and a string containing information on where the error was captured. The hook can return false to stop the error from propagating further.

https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

'Vue.js(Nuxt.js)' 카테고리의 다른 글

Life Cycle  (0) 2022.01.09
Computed VS Watch  (0) 2022.01.09
728x90

Computed

자동으로 값을 변경하고 캐싱해주는 반응형 getter(setter도 이용 가능)

1. 템플릿 내 표현식을 직접 작성

너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. 

2. computed를 이용

message에 의존하는 것을 알고 있기 때문에 message가 바뀔 때 reversedMessage에 의존하는 바인딩을 모두 업데이트할 것입니다.
computed 속성의 getter 함수는 사이드 이펙트가 없어 코드를 테스트하거나 이해하기 쉽습니다.
computed 속성은 종속 대상을 따라 저장(캐싱)된다는 것입니다. 즉, reversedMessage를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환합니다.

3. method를 이용

메소드를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행합니다. 이 속성을 계산하려면 거대한 배열을 반복해서 다루고 많은 계산을 해야 합니다. 이렇게 불필요한 계산을 반복하는 것보다는 computed를 사용하는 것이 개발공학적으로 훨씬 이득이라고 생각이 듭니다.

Watch

Vue instance의 특정 프로퍼티가 변경될 때 실행되는 반응형 callback

debounce와 capitalize는 lodash에서 제공하는 기능입니다.

위 코드에서 볼 수 있듯, question에 들어오는 input을 감지하고 getAnswer method를 실행시켜 '?'가 포함되어 있는지 감지하거나 API를 호출해 답변을 얻습니다.
watch 옵션을 사용하면 비동기 연산 (API 엑세스)를 수행하고, 우리가 그 연산을 얼마나 자주 수행하는지 제한하고, 최종 응답을 얻을 때까지 중간 상태를 설정할 수 있습니다. computed 옵션은 위 기능을 수행할 수 없습니다.
watch 옵션은 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용합니다.

Usage

computed로 작성이 되는 경우에는 무조건 computed로 작성할 것(이 경우 computed가 거의 옳다)
watch로 작성할 경우 코드의 복잡성이 증가할 수 있음.

하지만, 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에는 watch를 사용하는 것이 유용합니다. 저는 실무에서 특정 기능이 실행되면 반드시 어떤 함수를 실행시켜줘야할 때 사용했습니다. computed와 watch는 고급 Vue 프로그래밍을 하기 위해 반드시 익혀야할 옵션입니다.

'Vue.js(Nuxt.js)' 카테고리의 다른 글

Life Cycle  (0) 2022.01.09
Computed VS Watch  (0) 2022.01.09

+ Recent posts