您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“vue中mounted和created有哪些區(qū)別”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
區(qū)別:1、created在模板渲染成html前調(diào)用,即通常初始化某些屬性值,然后再渲染成視圖;mounted在模板渲染成html后調(diào)用,通常是初始化頁面完成后,再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。2、created中無法對(duì)chart進(jìn)行一些初始化配置,一定要等這個(gè)html渲染完后才可以進(jìn)行;而mounted可以。
用通俗的語言來說,就是 Vue中實(shí)例或者組件從創(chuàng)建到消滅中間經(jīng)過的一系列過程。 雖然不太嚴(yán)謹(jǐn),但是也基本上可以理解。
通過一系列實(shí)踐,現(xià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就是不二之選。下面看一個(gè)例子(用組件)。
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"
})
undefined
可以看到都在created賦予初始值的情況下成功渲染出來了。
但是同時(shí)看console臺(tái)如下:
可以看到第一個(gè)報(bào)了錯(cuò),實(shí)際是因?yàn)檎也坏絠d,getElementById(ID) 并沒有找到元素,原因如下:
在created的時(shí)候,視圖中的html并沒有渲染出來,所以此時(shí)如果直接去操作html的dom節(jié)點(diǎn),一定找不到相關(guān)的元素
而在mounted中,由于此時(shí)html已經(jīng)渲染出來了,所以可以直接操作dom節(jié)點(diǎn),故輸出了結(jié)果“唐浩益”。
“vue中mounted和created有哪些區(qū)別”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(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)容。