There have been a lot of articles on the Vue life cycle on the Web, and the origin of my article is actually my thoughts and understanding of what the official online description says: "El was newly created VM. $el Replace", so the article more content may be in the Vue life cycle "created Beforemount and mounted "process understanding.
Between Beforecreate and createdInitialize events at this stage for data observation.
CreatedWhen the Vue instance is created, it is called, and the data observer, properties and methods are performed, and the Watch/event event callback is configured.
You can call the methods in methods, access and modify data in the database, and trigger a response change to make the DOM render updates, trigger the corresponding method in watch, and computed the related properties for recalculation.
In general, the AJAX request initializes the instance data when created.
At this point, the VM. $el is not visible.
Between created and BeforemountIn this process,
A, first determine if there is an El option in the instance, some words continue to compile downward, and no words will stop compiling until the VM. $mount (EL) is called to continue (El is a mounted DOM node);
B, next determine if there is a template in the instance, and some words will compile it as a rander function;
c, without the template, the HTML that mounts the DOM element (that is, the DOM element of El and its inner element) is extracted and compiled as a template;
* Note: the DOM element corresponding to El cannot be a body/html element, because when the Vue instance is mounted, the corresponding DOM element and its inner elements are replaced by the new Dom rendered by the template.
D , if there is a rander function in the instance object, it is rendered directly through it.
Priority: Rander functions > Template > External HTML
At this point, the Rander function is ready and called for the first time.
In this process,the $el is initialized to the DOM element corresponding to the EL option in the instance, so the VM is used when beforemount. $el gets the HTML that mounts the DOM element.
BeforemountWhen Beforemount is called, $el is visible at this time.
Between Beforemount and mountedIn this process, theEl is replaced by the newly created VM. $el , and the instance is mounted. That is, the El option in the instance is replaced by the DOM element created by the template render, and the mount point in the page is replaced by the rendered instance code snippet of the Vue.
MountedNow that the instance is mounted on the DOM, you can get the DOM node in the instance through the DOM API. Print VMS on the console. $el, find that the previous mount point and content have been replaced with the new DOM.
Now look at the two processes through chestnuts.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <Scriptsrc= "Cdn.bootcss.com/vue/2.5.13/vue.min.js"></Script></Head><Body><DivID= "App"> <aID= ' ela 'href="">{{Message}}</a></Div></Body><Script> varapp= NewVue ({el:'#app', Data:function () { return{message:'Hello' }; }, Template:'<p id= "ELP" >{{message}}</p>', Beforemount:function() {Console.group ('Beforemount Pre-mount status =============== "'); Let State= { 'El': This. $el,'Data': This. $data,'message': This. Message} Let a=document.getElementById ('ELA'); Let P=document.getElementById ('ELP'); Console.log ( This. $el); Console.log (state); Console.log (a); //<a id= ' ela ' href= "" >{{message}}</a>Console.log (P); //NULL}, Mounted:function() {Console.group ('mounted Mount End status =============== "'); Let State= { 'El': This. $el,'Data': This. $data,'message': This. Message} Let a=document.getElementById ('ELA'); Let P=document.getElementById ('ELP'); Console.log ( This. $el); Console.log (state); Console.log (a); //NULLConsole.log (P); //<p id= "ELP" >father</p> }</Script></HTML>
With the Template/rander option you can see clearly in the console: After the mount is complete, the EL is newly created VM. $el replacement.
Before the mount is in the form of the original El and the virtual DOM exists, at this time, the contents of template, template content is not visible, print p tag is null;
After mounting, the template renders a new DOM that replaces the original EL, the corresponding Dom of the original El does not exist, and the print a tag is null.
BeforeUpdate and updatedWhen the data object is updated, the BeforeUpdate hook is triggered, and the view layer is not updated. BeforeUpdate There are a few areas to note:
A, the updated data must be in the template directly or indirectly used, will trigger BeforeUpdate;
B. data updates do not trigger beforeupdate! before being mounted that is, changing data at created and Beforemount does not trigger the update process;
C, if in BeforeUpdate, again modified the value of the data, will trigger the BeforeUpdate hook again, the update process two times.
Updated, the view layer has been updated.
(add two hooks to the above code)
Mounted:function () { This. Message = ' first ';//this.show = false; Show changes are not triggered because show is not used in the template BeforeUpdate},beforeupdate:function() {Console.group (' BeforeUpdate pre-update status =============== '); Let ELP= document.getElementById (' elp '). InnerHTML; Console.log (' Message: ' + This. Message); Console.log (' DOM: ' +elp);},updated:function() {Console.group (' Updated update complete status =============== '); Let ELP= document.getElementById (' elp '). InnerHTML; Console.log (' Message: ' + This. Message); Console.log (' DOM: ' +elp);}
One thing to note here:The view layer we need to get the contents of the corresponding element node through innerHTML, rather than get the element node directly. directly gets the element node, the data in the view layer that is printed in the console is updated and cannot print the correct value in real time, which should be related to the output of the chrome console.
For the third article, let's take a look at the following code demo:
Mounted:function () { This. Message = ' first ';},beforeupdate:function() {Console.group (' BeforeUpdate pre-update status =============== '); Let ELP= document.getElementById (' elp '). InnerHTML; Console.log (' Message: ' + This. Message); Console.log (' DOM: ' +elp); This. Message = ' second ';//The value of message is modified again in BeforeUpdate},updated:function() {Console.group (' Updated update complete status =============== '); Let ELP= document.getElementById (' elp '). InnerHTML; Console.log (' Message: ' + This. Message); Console.log (' DOM: ' +elp);}
Here we can clearly see the two update process, but there are some questions about the printed result: the first time the value of the message is changed to a, and the update Dom is rendered as first, when updated is called The values in both the message and the DOM should be first, while the second is printed at this time. I understand that in the first execution of the updated, the DOM has completed the second rendering update, the specific process also need to pass after the source of learning to understand. Here you have different understanding or more detailed explanation, you can leave a comment in the comments section, study together.
Here, we can add a timer in the BeforeUpdate to modify the value of the message, we can wait for the first data change, the DOM update rendering after the completion of the second data changes.
function () { console.group (' beforeUpdate pre-update status =============== '); = document.getElementById (' elp '). InnerHTML; Console.log (this. message); Console.log (' DOM: ' + elp); var This ; SetTimeout (function() { = ' second '; }); // this.message = ' second '; The value of message is modified again in BeforeUpdate },Here you can see the update status of the data and the view layer when the data changes two times.
Beforedestroy and destroyedBeforedestroy: the instance is called before it is destroyed, at which point the instance is still available.
Beforedestroy-A Destroyed:vue instance indicates everything will be unbound, all event listeners will be removed, and all child instances will be destroyed.
Called after the Destroyed:vue instance is destroyed.
End: About the Vue life cycle is summed up, there are mistakes in the place please point out, will be modified in time!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
