vue2.0提供了一個keep-alive組件用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗
keep-aliv是Vue.js的一個內(nèi)置組件。它能夠不活動的組件實例保存在內(nèi)存中，而不是直接將其銷毀，它是一個抽象組件，不會被渲染到真實DOM中，也不會出現(xiàn)在父組件鏈中。
它有兩個生命周期：
它提供了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是標識元素不再被復(fù)用，注意key是Vue中的一個保留的屬性，不能作為prop傳遞給子組件，否則會在控制臺看到Vue的報錯
但是keep-alive標識不重復(fù)創(chuàng)建組件實例，也就是只會觸發(fā)一次created mounted事件，
利用兩者可以對組件的復(fù)用進行比較精細的管理
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
