The difference between mounted and created in the Vue life cycle

first, what is the life cycle. In popular language, it is a sequence of instances in Vue or components from creation to elimination. Although not very rigorous, but also basically understandable. Through a series of practices, now put all the problems encountered, and today to record the difference between created and mounted: two, created and mounted difference. The official illustrations are as follows:
We see two nodes in the diagram: created: Called before the template renders to HTML, which is usually initialized with some property values and then rendered into the view. Mounted: Called after the template is rendered HTML, usually after the initialization page is complete, and then the HTML DOM node to do some of the necessary operations. In fact, the two better understand, usually created use more times, and mounted is usually in the use of some plug-ins or the use of components to operate, such as the use of plug-in chart.js: var ctx = document.getElementById (ID); Usually there is this step, and if you write to the component, you will find that the chart does not have some initialization configuration in created, it must wait until this HTML rendering is finished before it can be done, then mounted is not the second choice. Let's look at an example (with components) below. Iii. Examples [javascript]  View plain  copy <span style= "FONT-SIZE:14PX;" >vue.component ("Demo1",{           data:function () {                return {                    name: "",                   age: "",                    city: ""                }            },           template: " <ul><li id= ' name ' >{{name}}</li><li>{{age}}</li><li>{{city}}</li ></ul> ",     &Nbsp;     created:function () {                this.name= "Tang Haoyi"                 this.age =  "a"                 this.city = "Hangzhou"                 var x = document.getelementbyid ("name")//First Command console error                 console.log (x.innerhtml);            },           mounted: function () {               var x  = document.getelementbyid ("name")/</span>/the result of the second command console output <span style= "FONT-SIZE:14PX;" >    &nbsP;          console.log (x.innerhtml);            }       });        var vm = new vue ({            El: "#example1"        }) </span>   you can see the output as follows:
You can see that the created has been successfully rendered with the initial value assigned to it. But look at the console console as follows:
You can see the first error, actually because the Id,getelementbyid (ID) did not find the element, for the following reasons: in created, the HTML in the view is not rendered, so if you go directly to manipulate the DOM node of HTML, Must not find the relevant elements in the mounted, because at this time the HTML has been rendered, so you can directly manipulate the DOM node, so output the result "Tang Haoyi". The above is my own summary of the difference between mounted and mounted, written relatively humble, record down, deepen the impression.