Created in Vue.js difference () and the Mounted () of

Welcome to discuss

Geooo personal blog: https://geooo.gitee.io/geoooblog/

Observation Code

  data:(){ 
   return { 
    name:"", 
    age:"", city:"" } }, created :(){ this.name= "Geooo" this.age = "21" this.city ="东莞" var x = document.getElementById("name")//第一个命令台错误 console.log(x.innerHTML); }, mounted: (){ var x = document.getElementById("name")//第二个命令台输出的结果 console.log(x.innerHTML); } }); 

After executing a command can see the first report is wrong, the second command to run

Explain the principles of:

1. created  the template rendered before calling html, which is usually initialize certain property values, and then rendered into view
2. mounted in the template into html rendering calls, usually after page initialization is complete, and then the html dom node performs some operations needed.

Process explained

We can see the first report a mistake, because they can not actually the above mentioned id  getElementById (ID)  elements and did not find, for the following reasons:

When created, the view does not render html, so in this case if the node directly to the operating dom html, must find the relevant element

Mounted, since this time has been rendered html out, it can be directly manipulated dom nodes, so the output of the result "Geooo".