不多Bb先來看官網(wǎng)生命周期圖示
假如覺得上圖很復(fù)雜 來看這張簡單的
這就是生命周期的8個(gè)階段 其中用的最多的就是created（成功創(chuàng)建）階段了，比如很多小伙伴喜歡在這里進(jìn)行Ajax請求。
下面我們11來看實(shí)例中的鉤子 上代碼
1.beforeCreate
在實(shí)例初始化之后，數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。
var vm = new Vue({
el:'#app',
data:{
name:'凱GG'
},
beforeCreate(){
console.log('創(chuàng)建之前');
console.log(this.$el); //undefined
console.log(this.$data) //undefined
},
})
看結(jié)果：
vue對象實(shí)例，同時(shí)也沒有掛載對象
2.create
在實(shí)例創(chuàng)建完成后被立即調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測 (data observer)，屬性和方法的運(yùn)算，watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el 屬性目前不可見。
var vm = new Vue({
el:'#app',
data:{
name:'凱GG'
},
created() {
console.log('成功創(chuàng)建');
console.log(this.$el); //undefined
console.log(this.$data) // 初始化完成
}
})
數(shù)據(jù)已經(jīng)綁定到了對象實(shí)例，但是還沒有掛載對象
3.beforeMount
在掛載開始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。
var vm = new Vue({
el:'#app',
data:{
name:'凱GG'
},
beforeMount() {
console.log('即將掛載');
console.log(this.$el); //掛載完成
console.log(this.$data) // 初始化完成
}
})
看結(jié)果：
$el屬性，$el屬性是一個(gè)HTMLElement對象，也就是這個(gè)階段，vue實(shí)例通過原生的createElement等方法來創(chuàng)建這個(gè)html片段，準(zhǔn)備注入到我們vue實(shí)例指明的el屬性所對應(yīng)的掛載點(diǎn)
4.mounted
el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng)mounted被調(diào)用時(shí)vm.$el 也在文檔內(nèi)。
var vm = new Vue({
el:'#app',
data:{
name:'凱GG'
},
mounted() {
console.log('成功掛載');
console.log(this.$el);
console.log(this.$data)
}
})
看結(jié)果：
$el的內(nèi)容掛載到了el，相當(dāng)于我們在jquery執(zhí)行了$(el).html($el),生成頁面上真正的dom，上面我們就會發(fā)現(xiàn)dom的元素和我們$el的元素是一致的。在此之后，我們能夠用方法來獲取到el元素下的dom對象，并進(jìn) 行各種操作
5.beforeUpdate
數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM，比如手動(dòng)移除已添加的事件監(jiān)聽器。
<div id="app">
<div id="box">{{ name }}</div>
<input type="button" value="數(shù)據(jù)更新" @click="beforeUpdate">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'凱GG'
},
beforeUpdate() {
console.log(this.name)
console.log(document.getElementById('box').innerHTML)
},
methods:{
beforeUpdate(){
this.name = '數(shù)據(jù)更新'
}
},
})
</script>
看結(jié)果：
數(shù)據(jù)更新到
dom之前，我們可以看到$el對象已經(jīng)修改，但是我們頁面上dom的數(shù)據(jù)還沒有發(fā)生改變
6.updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁，在這之后會調(diào)用該鉤子。
當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計(jì)算屬性或 watcher取而代之。
<div id="app">
<div id="box">{{ name }}</div>
<input type="button" value="數(shù)據(jù)更新" @click="beforeUpdate">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'凱GG'
},
updated() {
console.log(this.name)
console.log(document.getElementById('box').innerHTML)
},
methods:{
beforeUpdate(){
this.name = '數(shù)據(jù)更新'
}
},
})
</script>
看結(jié)果：
dom結(jié)構(gòu)會通過虛擬dom的原則，找到需要更新頁面dom結(jié)構(gòu)的最小路徑，將改變更新到dom上面，完成更新
7.beforeDestroy
實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。
8.destroyed
Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實(shí)例也會被銷毀。
<div id="app">
<div id="box">{{ name }}</div>
<input type="button" value="銷毀實(shí)例" @click="beforeUpdate">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'凱GG'
},
beforeDestroy() {
console.log(this.$el)
console.log(this.$data)
},
destroyed() {
console.log(this.$el)
console.log(this.$data)
},
methods:{
beforeUpdate(){
vm.$destroy()
}
},
})
</script>
看結(jié)果：
