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)文章
這篇文章主要介紹了在Vue項目中使用snapshot測試的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了Vue搭建后臺系統(tǒng)需要做的幾點，文中給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
vue3+vite使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo)的方法
這篇文章主要介紹了vue3+vite使用vite-plugin-svg-icons插件顯示本地svg圖標(biāo)的方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
在 Vue Router 中,你可以使用滾動行為來定義路由切換時頁面滾動的行為,本文就詳細(xì)的介紹一下Vue-Router滾動行為的具體使用,感興趣的可以了解一下2023-08-08
vue+element實現(xiàn)頁面頂部tag思路詳解
這篇文章主要介紹了vue+element實現(xiàn)頁面頂部tag效果,頁面顯示由數(shù)組循環(huán)得出，數(shù)組可存儲在store里，tags數(shù)組里面已經(jīng)有值，由于默認(rèn)是白色，所以頁面上看不出，接下來就是給選中的標(biāo)簽高亮，需要的朋友可以參考下2021-12-12
vue2 中使用 render 函數(shù)編寫組件的方式
vue提供了聲明式編寫UI的方式,即vue提供了對DOM進(jìn)行描述的方式,有兩種描述DOM的方式即模板和render 函數(shù),本文通過示例代碼介紹vue2 中使用 render 函數(shù)編寫組件的方式,感興趣的朋友跟隨小編一起看看吧2024-06-06
element的el-form-item的prop作用小結(jié)
Vue表單驗證中的prop屬性用于指定需要驗證的表單字段,它定義了字段名稱并與驗證規(guī)則關(guān)聯(lián),確保數(shù)據(jù)的完整性和準(zhǔn)確性,本文就來介紹一下element的el-form-item的prop作用,感興趣的可以了解一下2025-01-01
uniapp Vue3中如何解決web/H5網(wǎng)頁瀏覽器跨域的問題
存在跨域問題的原因是因為瀏覽器的同源策略,也就是說前端無法直接發(fā)起跨域請求,同源策略是一個基礎(chǔ)的安全策略,但是這也會給uniapp/Vue開發(fā)者在部署時帶來一定的麻煩,這篇文章主要介紹了在uniapp Vue3版本中如何解決web/H5網(wǎng)頁瀏覽器跨域的問題,需要的朋友可以參考下2024-06-06
vue watch關(guān)于對象內(nèi)的屬性監(jiān)聽
這篇文章主要介紹了vue watch關(guān)于對象內(nèi)的屬性監(jiān)聽的相關(guān)知識，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
vuex+axios+element-ui實現(xiàn)頁面請求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實現(xiàn)頁面請求loading操作,結(jié)合實例形式分析了vuex+axios+element-ui實現(xiàn)頁面請求過程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2020-02-02