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