Vue.js中 created( ) 與 mounted( )的區別

歡迎一起討論

Geooo的個人博客：https://geooo.gitee.io/geoooblog/

觀察代碼

  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); } }); 

執行后可看到第一個命令是報錯誤的，第二個命令能運行

原理解釋：

1. created 在模板渲染成html前調用，即通常初始化某些屬性值，然后再渲染成視圖
2. mounted在模板渲染成html后調用，通常是初始化頁面完成后，再對html的dom節點進行一些需要的操作。

過程解釋

可以看到第一個報了錯，實際是因為找不到id getElementById(ID) 並沒有找到元素，原因如下：

在created的時候，視圖中的html並沒有渲染出來，所以此時如果直接去操作html的dom節點，一定找不到相關的元素

mounted，由於此時html已經渲染出來了，所以可以直接操作dom節點，故輸出了結果“Geooo”。