Vue 생명주기 LifeCycle(mounted, v-if)

vue3

vue2

 

	vue3	vue2
Lifecycle
출처	https://vuejs.org/guide/essentials/lifecycle.html#registering-lifecycle-hooks	https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

 

	vue3	vue2
출처	https://vuejs.org/api/options-lifecycle.html	https://v2.vuejs.org/v2/api/#Options-Lifecycle-Hooks
before Create	Called when the instance is initialized. Called immediately when the instance is initialized, after props resolution, before processing other options such as data() or computed.	Called synchronously immediately after the instance has been initialized, before data observation and event/watcher setup.
created	Called after the instance has finished processing all state-related options. When this hooks is called, the following have been set up: reactive data, computed properties, methods, and watchers. However, the mounting phase has not been started, and the $el property will not be available yet.	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.
before Mount	Called right before the component is to be mounted. When this hook is called, the component has finished setting up its reactive state, but no DOM nodes have been created yet. It is about to execute its DOM render effect for the first time. This hook is not called during server-side rendering.	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.
mounted	Called after the component has been mounted. A component is considered mounted after: All of its synchronous child components have been mounted (does not include async components or components inside <Suspense> trees). Its own DOM tree has been created and inserted into the parent container. Note it only guarantees that the component's DOM tree is in-document if the application's root container is also in-document. This hook is typically used for performing side effects that need access to the component's rendered DOM, or for limiting DOM-related code to the client in a server-rendered application. This hook is not called during server-side rendering.	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: This hook is not called during server-side rendering.
before Update	Called right before the component is about to update its DOM tree due to a reactive state change. This hook can be used to access the DOM state before Vue updates the DOM. It is also safe to modify component state inside this hook. This hook is not called during server-side rendering.	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.
updated	A parent component's updated hook is called after that of its child components. This hook is called after any DOM update of the component, which can be caused by different state changes. If you need to access the updated DOM after a specific state change, use nextTick() instead. This hook is not called during server-side rendering.	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: This hook is not called during server-side rendering.
activated		Called when a kept-alive component is activated. This hook is not called during server-side rendering.
deactivated		Called when a kept-alive component is deactivated. This hook is not called during server-side rendering.
before Destroy		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.
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.
before Unmount	Called right before a component instance is to be unmounted. When this hook is called, the component instance is still fully functional. This hook is not called during server-side rendering.
unmounted	Called after the component has been unmounted. A component is considered unmounted after: All of its child components have been unmounted. All of its associated reactive effects (render effect and computed / watchers created during setup()) have been stopped. Use this hook to clean up manually created side effects such as timers, DOM event listeners or server connections. This hook is not called during server-side rendering.

 

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

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

출처 : https://vuejs.org/api/built-in-directives.html#v-if

When a v-if element is toggled, the element and its contained directives / components are destroyed and re-constructed.

If the initial condition is falsy, then the inner content won't be rendered at all.

Built-in Directives | Vue.js

 

Options: Lifecycle | Vue.js

 

API — Vue.js

 

Lifecycle Hooks | Vue.js

 

The Vue Instance — Vue.js

---

참고 페이지1 : vue2 Lifecycle 과 vue3 Lifecycle 이 다르다는 것을 알게 됨

https://hasudoki.tistory.com/entry/VueJs-3-Composition-API-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-3Modularzing-LifeCycle-Hooks-Watch

Vue.Js 3 Composition API 살펴보기 - 3(Modularzing, LifeCycle Hooks, Watch)

참고 페이지2 : child 컴포넌트가 mounted 된 다음에 parent 컴포넌트가 mounted 된다는 사실을 알게 됨

https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html

Vue 라이프사이클 이해하기 - 재그지그의 개발 블로그