Vue中 key keep-alive的實現(xiàn)原理
更新時間：2018年09月18日 09:09:01 作者：麋鹿傳
這篇文章主要介紹了Vue中 key keep-alive的實現(xiàn)原理,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
vue2.0提供了一個keep-alive組件用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗
keep-aliv是Vue.js的一個內(nèi)置組件。它能夠不活動的組件實例保存在內(nèi)存中，而不是直接將其銷毀，它是一個抽象組件，不會被渲染到真實DOM中，也不會出現(xiàn)在父組件鏈中。
它有兩個生命周期：
- activated: keep-alive組件激活時調(diào)用
- deactivated: keep-alive組件停用時調(diào)用
它提供了include與exclude兩個屬性，允許組件有條件地進(jìn)行緩存。
keep-alive key
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<keep-alive>
<child-component key="1" v-if="seen" name="1"></child-component>
<child-component key="2" v-if="!seen" name="2"></child-component>
</keep-alive>
<button @click="toggle">toggle</button>
</div>
<script type="text/javascript">
Vue.component('child-component', {
template: `<input type="text" placeholder="enter">`,
data() {
return {}
},
props: ["name"],
mounted() {
console.log(`${this.name} mounted`)
}
})
const vm = new Vue({
el: "#app",
data: {
seen: true
},
methods: {
toggle() {
this.seen = !this.seen;
}
}
})
</script>
</body>
</html>
key是標(biāo)識元素不再被復(fù)用，注意key是Vue中的一個保留的屬性，不能作為prop傳遞給子組件，否則會在控制臺看到Vue的報錯
但是keep-alive標(biāo)識不重復(fù)創(chuàng)建組件實例，也就是只會觸發(fā)一次created mounted事件，
利用兩者可以對組件的復(fù)用進(jìn)行比較精細(xì)的管理
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
解決echarts echarts數(shù)據(jù)動態(tài)更新和dataZoom被重置問題
這篇文章主要介紹了解決echarts echarts數(shù)據(jù)動態(tài)更新和dataZoom被重置問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue項目中禁用瀏覽器緩存配置案例,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue如何使用AIlabel標(biāo)注組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue項目實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
VUE3?Vite打包后動態(tài)圖片資源不顯示問題解決方法
這篇文章主要給大家介紹了關(guān)于VUE3?Vite打包后動態(tài)圖片資源不顯示問題的解決方法,可能是因為在部署后的服務(wù)器環(huán)境中對中文文件名的支持不完善,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作
這篇文章主要介紹了vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑
這篇文章主要介紹了淺談Vue使用Cascader級聯(lián)選擇器數(shù)據(jù)回顯中的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了如何使用vue實現(xiàn)視頻全屏切換的功能,文中的示例代碼講解詳細(xì), 具有一定的借鑒價值,有需要的小伙伴可以參考一下2023-11-11
下面小編就為大家分享一篇vue2.0 路由不顯示router-view的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue2 中使用 render 函數(shù)編寫組件的方式
vue提供了聲明式編寫UI的方式,即vue提供了對DOM進(jìn)行描述的方式,有兩種描述DOM的方式即模板和render 函數(shù),本文通過示例代碼介紹vue2 中使用 render 函數(shù)編寫組件的方式,感興趣的朋友跟隨小編一起看看吧2024-06-06