Vue life cycle

The lifecycle of a single VUE

BeforeCreate and created

BeforeCreate and created functions are instantiated Vue stage, performed in _init method, it is defined in SRC/core/instance/init. In js:

vue.prototype._init = function() { initLifecycle(vm); initEvents(vm); initRender(vm); callHook(vm, 'beforeCreate') /// the beforeCreate hook function cannot get props, data, computed, or methods initInjection (VM) initState(VM) initialization Props, data, methods, Watch, computed initProvide(VM) callHook(VM, 'created') // DOM is not rendered, so DOM cannot be accessed. $el attribute cannot be accessed, $ref is an empty array}Copy the code

BeforeMount and mounted

BeforeMount before VNode is rendered by vm._render(), the beforeMount hook function is executed. BeforeMount, the corresponding template is found and compiled into the render function.

After vm._update() is executed to insert VNode patch into the DOM, mount the instance to the DOM. In this case, you can obtain the DOM node through the DOM API. $ref can access the DOM node.

During component mount, Watcher is instantiated to listen for data changes on the VM and re-render.

BeforeUpdate and updated

BeforeUpdate and updated hook functions should be executed at data update time,

BeforeUpdate is executed in the before function of the rendering Watcher, before the virtual DOM is patched.

Update is executed when the flushSchedulerQueue function is called after the virtual DOM has been rerendered and patched. The component DOM has been updated to perform DOM-dependent operations. ⚠️ Note: Avoid working with data, which can get caught in an endless loop

BeforeDestory and destroyed

BeforeDestory: Called before instance destruction, at this step, the instance is still available and this still gets the instance.

Destoryed: called after the instance is destroyed. After the call, all vue instances indicated are unbound, all event listeners are removed, and all subinstances are destroyed.

Lifecycle of Vue parent component

Loading the rendering process

Parent beforeCreate -> Parent created -> parent beforeMount -> child beforeCreate -> child created -> child beforeMount -> Child Mounted -> parent MountedCopy the code

⚠️ Note: Mounted does not promise that all child components will be mounted at once. If you want to render the entire view, use vm.$nextTick instead of Mounted

The update process

Parent beforeUpdate -> Child bedoreUpdate -> Child updated -> Parent updatedCopy the code

Destruction of the process

Parent beforeDestory -> child beoreDestory -> child deStoryed -> parent destoryedCopy the code

nextTick

The $nextTick Vue

Vue’s official description of the nextTick API is that it executes a delayed callback after the next DOM update loop and calls this method immediately after the data is modified to retrieve the updated DOM.

The Vue performs DOM updates asynchronously, opening a queue and buffering all data changes that occur in the same Event Loop whenever a data change is observed. If the same watcher is triggered more than once, it will only be pushed into the queue once. This removal of duplicate data while buffering is important to avoid unnecessary computer and DOM manipulation. Then, in the next event loop ‘tick’, vue flushes the queue and performs timing work.

Since data changes to DOM update rendering are an asynchronous process that occurs on the nextTick, if some of our methods rely on DOM changes after data changes, we must execute them after nextTick.

Application scenarios

  1. The created hook function of the Vue lifecycle must be placed in the $nextTick callback when DOM manipulation is performed.
  2. When in a project you want to do something based on the new DOM after changing the DOM element’s data
  3. This is also used when using a third-party plug-in that you want to reapply when some of the DOM generated by vUE changes dynamically

The process of the Node. Js. NextTick

The process.nexttick () method adds the callback function to the queue at the next point in time. This queue will be completely exhausted after the current operation on the JS stack completes and before the Event Loop is allowed to continue. It’s a micromission.