Eight created mounted updated destroyed are commonly used, and three activated deactivated errorCaptured are rarely usedCopy the code

  1. BeforeCreate (called before instance creation) At this point, the data observation event configuration has not yet started

  2. Created (called when the instance is created) At this point, the instance is configured for data observation, property and method operations, and watch/ Event event callbacks.

  3. BeforeMount (called before the instance is mounted to the container) At this point, the Render function is called for the first time. The example completes the following configuration: compile the template, and generate HTML from the data inside the data and template. Mounted el is mounted after the instance is mounted

  4. Mounted The instance completes the following configuration: Replace the DOM object pointed to by the EL attribute with the above compiled HTML content. Render THE XML from the template into an HTML page. The virtual DOM becomes the real DOM

  5. BeforeUpdate (called before data is updated) occurs before the virtual DOM is patched.

  6. Updated (invoked after data is updated) Is invoked after the virtual DOM is re-rendered and patched due to data changes. When called, the component DOM is already updated, so DOM-dependent operations can be performed. In most cases, however, you should avoid changing the state during this period, as this can lead to an infinite update loop

  7. Activated Keep-alive is invoked when the activated component is activated

  8. Deactivated When the keep-alive component is disabled

What is the VUE lifecycle

A: The lifecycle of a Vue instance is the process from creation to destruction. The life cycle of a Vue is a series of processes from the beginning of creating, initializing data, compiling templates, mounting Dom, rendering, updating, rendering, and destroying

How many phases are there in the VUE life cycle?

A: It can be divided into 8 stages altogether: before/after creation, before/after loading, before/after update, and before/after destruction

Which hooks are triggered the first time the page loads?

A: Generates beforeCreate, created, beforeMount, mounted

In what cycle is DOM rendering completed?

A: DOM rendering is done in Mounted

V-if V-show updated hook

Answer: V-if triggers the updated hook because the data has changed and the instance detects the change, it raises beforeUpdate and then updates both hooks.

  1. V-if: Indicates the initial setting for a componentv-if:falseThe component will not render and the lifecycle hook will not execute whenfalse => trueComponent will be rendered, and in turn to the execution of the component beforeCreate created, beforeMount, mounted hooks, andtrue => falseExecute beforeDestroy, Destroyed hooks in sequence
  2. V – show: one will be executed in sequence full lifecycle beforeCreate, created, beforeMount, mounted

When is the AJAX request proposal initiated?

A: created the difference between the phase of the ajax requests and mounted request: the former page view, if the request letter blog.csdn.net/sunhuaqiang…

Mounted Are subcomponents mounted at the same time?

A: Simultaneous mount is not promised, but if you want to wait until the entire view is rendered, you can use vm.$nextTick

The use of this $nextTick

Blog.csdn.net/sunhuaqiang…

Why do prop changes sometimes not trigger updated?

Online sample

  • A change in view would bringupdatedThe trigger
  • In this case, if the child componentVirtual domThe same. In short, yourspropContent is not bound to the view, thenupdatedIt doesn’t trigger