Vue中 key keep-alive的實(shí)現(xiàn)原理

更新時(shí)間：2018年09月18日 09:09:01 作者：麋鹿傳

這篇文章主要介紹了Vue中 key keep-alive的實(shí)現(xiàn)原理,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

vue2.0提供了一個(gè)keep-alive組件用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗

keep-aliv是Vue.js的一個(gè)內(nèi)置組件。它能夠不活動(dòng)的組件實(shí)例保存在內(nèi)存中，而不是直接將其銷毀，它是一個(gè)抽象組件，不會(huì)被渲染到真實(shí)DOM中，也不會(huì)出現(xiàn)在父組件鏈中。

它有兩個(gè)生命周期：

activated: keep-alive組件激活時(shí)調(diào)用
deactivated: keep-alive組件停用時(shí)調(diào)用

它提供了include與exclude兩個(gè)屬性，允許組件有條件地進(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)識(shí)元素不再被復(fù)用，注意key是Vue中的一個(gè)保留的屬性，不能作為prop傳遞給子組件，否則會(huì)在控制臺(tái)看到Vue的報(bào)錯(cuò)

但是keep-alive標(biāo)識(shí)不重復(fù)創(chuàng)建組件實(shí)例，也就是只會(huì)觸發(fā)一次created mounted事件，

利用兩者可以對(duì)組件的復(fù)用進(jìn)行比較精細(xì)的管理

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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