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

+ Recent posts