Explain the differences and usage scenarios between created and mounted

Lifecycle hook

What is life cycle ：

• informally , The life cycle is Vue An instance or component is a series of processes from creation to elimination , The middle nodes are called hooks

Lifecycle diagram ：

Browser render pass

Have a deep understanding of the various nodes of the lifecycle , You must understand the browser's rendering process

• structure DOM Trees
• structure css The rule tree , Parse according to the execution order js file .
• Build the render tree Render Tree
• Render tree layout layout
• Rendering tree drawing

English class

Since we are analyzing created and mounted hook , Words are also helpful to our understanding

• created： Created
• mounted： Mounted

Browser rendering in the lifecycle

Life cycle	Whether to obtain dom node	Whether to obtain data	Whether to obtain methods
beforeCreate	no	no	no
created	no	yes	yes
beforeMount	no	yes	yes
mounted	yes	yes	yes

As you can see from the life cycle diagram at the beginning of this article

• created Render the template as html Pre invocation
• mounted Render the template as html After the call

beforeCreate Stage

For browsers , The whole rendering process has not yet started or is ready to start , Yes vue Come on , The instance has not been initialized ,data observer and event/watcher It has not been called , At this stage , Yes data、methods Or the call of the document node can't get the correct data now .

created Stage

For browsers , Render the entire HTML When the document ,dom node 、css Rule tree and js After the file is parsed , But no access to the browser render The process , The above resources are not yet mounted on the page , That is to say vue Corresponding in the life cycle created Stage , The instance has been initialized , But it hasn't been mounted to $el On , So we can't get the corresponding node , But at this time, we can get vue in data And methods Of the data in

beforeMount Stage

Actually with created The stages are similar , The node is not mounted , But you can still get data And methods Data in .

mounted Stage

For browsers , It's done dom And css Rule tree render, And finish to render tree It was laid out , And the browser receives this instruction , Call the paint（） Show... On the screen , And for vue Come on , stay mounted Stage ,vue Of template Successfully mounted in $el in , At this point, a complete page can be displayed in the browser , So at this stage , The node can be called （ On this point , In the author's test , stay mounted Method and then run, You can still see the whole page in the browser ）.

Use scenarios

Through the browser's rendering process , It can be concluded that created and mounted Usage scenarios of

• created： Usually used for Initialize some attribute values , for example data Data in , And then render to the view .
• mounted： Usually after the initialization page is completed , Yes html Of dom The node performs the required operations .

therefore , stay created in , It's impossible DOM Operation of the , and mounted You can get all the rendered attribute values .

Reference documents

[ Lifecycle hook | Vue.js (vuejs.org)]

Vue In the life cycle mounted and created The difference between

[vue in created And mounted difference ]