生命周期、插槽
介紹: 每個(gè) Vue 實(shí)例/組件在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽(tīng)、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過(guò)程中的某些階段也會(huì)運(yùn)行一些特定的函數(shù),這些函數(shù)就被叫做生命周期鉤子，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。
生命周期鉤子函數(shù)詳解(前面帶*號(hào)的生命周期表示非常用生命周期)
*beforeCreate: 在實(shí)例初始化之后，數(shù)據(jù)觀測(cè) (data observer) 和 event/watcher 事件配置之前被調(diào)用。該生命周期中無(wú)法訪問(wèn)data 計(jì)算屬性 props
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
},
beforeCreate() {
console.log(
'組件被實(shí)例化后觸發(fā),但是該生命周期階段數(shù)據(jù)還沒(méi)有初始化完成',
this,
this.$data // undefined
)
}
})
created: 在實(shí)例創(chuàng)建完成后被立即調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè) (data observer)，property 和方法的運(yùn)算，watch/event 事件回調(diào)。然而，掛載階段還沒(méi)開(kāi)始，$el 目前尚不可用。(在這個(gè)生命周期中不要操作頁(yè)面中DOM元素,因?yàn)樵剡€沒(méi)有被渲染出來(lái))
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
},
created() {
console.log(
'組件被實(shí)例化后觸發(fā),data/計(jì)算屬性/watch/methods已經(jīng)配置完成,這里可以執(zhí)行一些初始網(wǎng)絡(luò)請(qǐng)求操作',
this,
this.$data
)
this.getDataFromServer()
},
methods: {
getDataFromServer() {
console.log('開(kāi)啟網(wǎng)絡(luò)請(qǐng)求,向服務(wù)器請(qǐng)求數(shù)據(jù)')
}
}
})
*beforeMount: 在掛載(渲染)開(kāi)始之前被調(diào)用: 相關(guān)的 render 函數(shù)首次被調(diào)用。
mounted: 實(shí)例被掛載后調(diào)用，這時(shí) el 被新創(chuàng)建的 vm.$el 替換了。如果根實(shí)例掛載到了一個(gè)文檔內(nèi)的元素上，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。
注意: mounted 不會(huì)保證所有的子組件也都一起被掛載。如果你希望等到整個(gè)視圖都渲染完畢，可以在 mounted 內(nèi)部使用 vm.$nextTick
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
},
beforeMount() {
console.log('實(shí)例將要被渲染',this.$refs) // this.$refs空對(duì)象
},
mounted() {
console.log('組件掛載完畢,掛載的意思就是實(shí)例第一次渲染完成,這里是一個(gè)操作DOM的好時(shí)機(jī)', this.$refs)
//this.$refs元素已經(jīng)獲取完畢
this.$nextTick(()=> {
// 這里所有子組件全部掛載完畢
})
}
})
beforeUpdate: 數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM更新渲染之前。這里適合在更新之前訪問(wèn)現(xiàn)有的 DOM，比如手動(dòng)移除已添加的事件監(jiān)聽(tīng)器。
updated: 由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在DOM更新渲染之后會(huì)調(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 取而代之。
注意: updated 不會(huì)保證所有的子組件也都一起被重繪。如果你希望等到整個(gè)視圖都重繪完畢，可以在 updated 里使用 vm.$nextTick
new Vue({
el: '#app',
data: {
name: '小明',
age: 18
},
beforeUpdate() {},
updated: function () {
// 不能保證所有子組件更新完畢
this.$nextTick(function () {
//保證所有子組件更新完畢
})
}
})
beforeDestroy: 實(shí)例銷(xiāo)毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。(在該生命周期中我們?nèi)匀豢梢栽L問(wèn),實(shí)例對(duì)象的屬性 方法 計(jì)算屬性 DOM節(jié)點(diǎn)等)。
該生命周期中應(yīng)該去做一些清理工作如：解綁計(jì)時(shí)器，取消網(wǎng)絡(luò)請(qǐng)求，清理掉哪些原生事件監(jiān)聽(tīng)或者在mounted階段創(chuàng)建DOM節(jié)點(diǎn)
new Vue({
el: '#app',
data: {
name: '小明',
age: 18,
index: 0
},
mounted() {
// 模擬啟動(dòng)輪播圖
this.timer = setInterval(() => {
this.index++
}, 1000);
},
beforeDestroy() {
// 解綁計(jì)時(shí)器
clearInterval(this.timer)
}
})
*destroyed: 實(shí)例銷(xiāo)毀后調(diào)用。該鉤子被調(diào)用后，對(duì)應(yīng) Vue 實(shí)例的所有指令都被解綁，所有的事件監(jiān)聽(tīng)器被移除，所有的子實(shí)例也都被銷(xiāo)毀。
activated: 被 keep-alive 緩存的組件激活時(shí)調(diào)用。
deactivated: 被 keep-alive 緩存的組件停用時(shí)調(diào)用。
<div id="app">
<keep-alive>
<component :is="show? 'demo': 'test'"></component>
</keep-alive>
<button @click="show = !show">show/hidden</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
},
components: {
demo: {
template: '<div>我是一個(gè)demo組件</div>',
mounted() {
console.log('組件第一次掛載完畢')
},
beforeDestroy() {
console.log('組件將要被銷(xiāo)毀')
},
activated() {
console.log('demo組件被激活')
},
deactivated() {
console.log('demo組件被停用')
}
},
test: {
template: '<h2 @click="count++">count{{count}}</h2>',
data() {
return {
count: 7
}
},
activated() {
console.log('test組件被激活')
},
deactivated() {
console.log('test組件被停用')
}
}
}
})
</script>
插槽
概念: Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，為組件提供了一個(gè) <slot> 元素作為承載分發(fā)內(nèi)容的出口。
語(yǔ)法:
<script>
Vue.component('login-component',{
template: `
<div>
<div>
// 分發(fā)內(nèi)容的內(nèi)容會(huì)被承載到這個(gè)slot標(biāo)簽位置
<slot></slot>
</div>
<p>
賬號(hào): <input>
</p>
<p>
密碼: <input type="password">
</p>
<button>登錄</button>
</div>
`
})
</script>
// 這時(shí)你可以這樣使用組件
<login-component>
<h2>科技</h2>
</login-component>
// 渲染在瀏覽器的結(jié)果是
<div>
<div>
<!--分發(fā)內(nèi)容的內(nèi)容會(huì)被承載到這個(gè)slot標(biāo)簽位置 -->
<h2>科技</h2>
</div>
<p>
賬號(hào): <input>
</p>
<p>
密碼: <input type="password">
</p>
<button>登錄</button>
</div>
注意:
如果
<login-component>的 template 中沒(méi)有包含一個(gè)<slot>元素，則該組件對(duì)稱標(biāo)簽內(nèi)部的任何內(nèi)容都會(huì)被拋棄。<slot>元素內(nèi)部可以設(shè)置后備內(nèi)容,如果當(dāng)前組件對(duì)稱標(biāo)簽內(nèi)部沒(méi)有插入任何內(nèi)容的話,組件最終會(huì)渲染后備內(nèi)容
Vue.component('login-component',{
template: `
<div>
<div>
<slot>后備內(nèi)容</slot>
</div>
<p>
賬號(hào): <input>
</p>
<p>
密碼: <input type="password">
</p>
<button>登錄</button>
</div>
`
})
具名插槽
概念: 有時(shí)我們組件需要多個(gè)插槽?？梢詫⒉煌慕M件插入到不同插槽內(nèi)部，實(shí)現(xiàn)方法是使用具名插槽，給組件中的<slot> 元素設(shè)置一個(gè)name屬性。在向具名插槽提供內(nèi)容的時(shí)候，我們可以在一個(gè) <template> 元素上使用 v-slot 指令將對(duì)應(yīng)的內(nèi)容插入到指定的<slot> 元素上
語(yǔ)法:
<script>
Vue.component('login-component',{
template: `
<div>
<div>
<slot>后備內(nèi)容</slot>
</div>
<p>
賬號(hào): <slot name="user"></slot>
</p>
<p>
密碼: <slot name="psd"></slot>
</p>
<button>登錄</button>
<slot></slot>
</div>
`
})
</script>
<login-component>
<h2>科技</h2>
<template v-slot:user>
<!-- 這里所有的內(nèi)容都會(huì)被插入到name="user" 插槽中 -->
<div>
123
</div>
</template>
<input slot="psd" type="password" placeholder="這個(gè)元素會(huì)被插入到name=psd 插槽中">
<component-a slot="psd"></component-a>
</login-component>
注意：跟 v-on 和 v-bind 一樣，v-slot 也有縮寫(xiě)，即把參數(shù)之前的所有內(nèi)容 v-slot: 替換為字符 #。
例: v-slot:header 可以被縮寫(xiě)為 #header
<login-component>
<h2>科技</h2>
<template #user>
這里所有的內(nèi)容都會(huì)被插入到name="user" 插槽中
<div>
123
</div>
</template>
<template #psd>
<input type="password" placeholder="這個(gè)元素會(huì)被插入到name=psd 插槽中">
</template>
</login-component>
注意：插槽在項(xiàng)目開(kāi)發(fā)中不太常用，常用于一些UI庫(kù)的開(kāi)發(fā)。如果想對(duì)插槽有更深的了解可以查閱官方文檔
