找錯(cuò)誤和解決需求
標(biāo)紅的是生命周期的函數(shù)拾给。
new Vue()實(shí)例一個(gè)當(dāng)前的Vue對(duì)象祥得,沒(méi)有創(chuàng)建這個(gè)對(duì)象之前,可以調(diào)用
beforeCreate()對(duì)當(dāng)前的事件配置蒋得,屬性(data)還沒(méi)有真的去識(shí)別屬性里的東西级及。
可以做加載的動(dòng)畫。
created()這個(gè)時(shí)候?qū)嵗鰜?lái)额衙,屬性成功被綁定饮焦,但是DOM還沒(méi)有出來(lái),在這個(gè)方法中獲取對(duì)應(yīng)的數(shù)據(jù)窍侧,比如網(wǎng)絡(luò)請(qǐng)求的數(shù)據(jù)賦給屬性县踢。然后在往下執(zhí)行的時(shí)候就可以展示在DOM下了。
結(jié)束上一步的loading加載的東西伟件。
然后檢查是否有el如果有檢查有沒(méi)有template
如果沒(méi)有el硼啤,看是否存在$mount,然后檢查template
new Vue({
el: '#app',
components: { App },
template: '<App/>'
}).$mount("#app")
如果都沒(méi)有當(dāng)前的生命周期結(jié)束。
存在template有兩種情況
一: template: '<App/>'會(huì)執(zhí)行具體的組件斧账,有了這個(gè)組件就會(huì)執(zhí)行render方法來(lái)渲染當(dāng)前template對(duì)應(yīng)的內(nèi)容谴返。
二:
template:`
<div id="app">
<h1>Hello world</h1>
</div>
`
如果都沒(méi)有,當(dāng)前生命周期結(jié)束其骄。
beforeMount()開(kāi)始編譯當(dāng)前的模板亏镰,這個(gè)方法在虛擬DOM中執(zhí)行的扯旷。沒(méi)有真實(shí)的將內(nèi)容渲染到頁(yè)面上拯爽,執(zhí)行el 指向的元素把template的內(nèi)容放里
mounted 模板編譯完,開(kāi)始掛載钧忽,結(jié)束毯炮,頁(yè)面就展示出來(lái)了。DOM生成耸黑。
更改beforeUpdate組件更新之前的方法
updated更新了當(dāng)前組件桃煎,執(zhí)行完,頁(yè)面就展示出來(lái)了大刊。一般情況下我們要向在當(dāng)前的組件發(fā)生一些改變時(shí)調(diào)用为迈。
beforeDestroy銷毀之前
destroyed銷毀了。