亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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è)生命周期：

  1. activated: keep-alive組件激活時(shí)調(diào)用
  2. 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ì)的管理

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

相關(guān)文章

最新評(píng)論