您好,登錄后才能下訂單哦!
小編給大家分享一下Vue生命周期中的created和mounted有哪些區(qū)別,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
vue生命周期中的created和mounted區(qū)別是:created在模板渲染成html前調(diào)用,需要先初始化值再渲染視圖;而mounted是在渲染成html后調(diào)用,即在初始化頁面完成后再對(duì)html進(jìn)行操作。
created和mounted區(qū)別
我們從圖中看兩個(gè)節(jié)點(diǎn):
created:在模板渲染成html前調(diào)用,即通常初始化某些屬性值,然后再渲染成視圖。
mounted:在模板渲染成html后調(diào)用,通常是初始化頁面完成后,再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作
其實(shí)這兩者比較好理解,通常created使用的次數(shù)多,而mounted通常是在一些插件的使用或者組件的使用中進(jìn)行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID)
;通常會(huì)有這一步,而如果你寫入組件中,你會(huì)發(fā)現(xiàn)在created中無法對(duì)chart進(jìn)行一些初始化配置,一定要等這個(gè)html渲染完后才可以進(jìn)行,那么mounted就是不二之選
例:
Vue.component("demo1",{ data:function(){ return { name:"", age:"", city:"" } }, template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>", created:function(){ this.name="張三" this.age = "12" this.city ="合肥" var x = document.getElementById("name")//第一個(gè)命令臺(tái)錯(cuò)誤 console.log(x.innerHTML); }, mounted:function(){ var x = document.getElementById("name")//第二個(gè)命令臺(tái)輸出的結(jié)果 console.log(x.innerHTML); } }); var vm = new Vue({ el:"#example1" })
可以看到都在created賦予初始值的情況下成功渲染出來了。
但是同時(shí)看console臺(tái)如下:
可以看到第一個(gè)報(bào)錯(cuò)了,實(shí)際是因?yàn)間etElementById(id) 沒有找到元素,原因如下:
在created的時(shí)候,視圖中的html并沒有渲染出來,所以此時(shí)如果直接去操作html的dom節(jié)點(diǎn),一定找不到相關(guān)的元素
而在mounted中,由于此時(shí)html已經(jīng)渲染出來了,所以可以直接操作dom節(jié)點(diǎn),故輸出了結(jié)果“張三”。
看完了這篇文章,相信你對(duì)Vue生命周期中的created和mounted有哪些區(qū)別有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。