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

發(fā)布時間：2020-09-11 14:27:43 來源：腳本之家閱讀：177 作者：麋鹿傳欄目：web開發(fā)

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

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

它有兩個生命周期：

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

它提供了include與exclude兩個屬性，允許組件有條件地進行緩存。

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是標識元素不再被復用，注意key是Vue中的一個保留的屬性，不能作為prop傳遞給子組件，否則會在控制臺看到Vue的報錯

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

利用兩者可以對組件的復用進行比較精細的管理

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽