>[success] # keep-alive 1. 在切換時創建新的組件時候，想保留上次切換時候的狀態，使用 `keep-alive` 進行**緩存的組件**,以下面[案例](https://sfc.vuejs.org/#eNqtVM2OlEAQfpWyL6OZgfZMGOKwR+MbcGGgZoYV6E53w2rIJJ5MTLx68Dm8GJ9HfQ6raWCG2XE3G00IUFVffdVdfx3bSOm3DbKAhTpThTRRUheVFMrAjajkBnZKVLDweS9Z6GIGiGeAeAAAJDW+60E57tKmNNBZbUYYUWNtdACdC7AaaI4rC8hTkz5/4cAACk2j6lEi90Ypcg5g0bv2gQCO9kMvekI+XYIEg5UsU4MkAYR50UJWplqvE5ZjJRLW68lSplsso7CoZWPAvJdICJXmBUGg9SqRY0maIbjVpWVjMf0hSOYRbELuWP4DZewo4wvKZ54Hvz5+/f3tC/z8/gE8bzS4OrVesTtRwnq9nrLEotCV79wjJg8sNQ62eLQdFL8W8cfnKxH1Qdw9NebffOKTz3iW88Nc3P/T2WleI8pNWbSuzr1q6jMIClvvKdEUYbKN/nxOEHLqFPoL+Vn/sBVzTe9VqfRvtahpYvq+TAaDThj1tKNMGI2BlRN2MEbqgHO9y+xs3GpfqD2nP181tSkq9FFX3laJO42KiBPWz8HAwUnZovLo8DkqVA9xXkDv8Y5TQleZZnk29tcG9pF5FHSHAF4+dQ5PhZLRzdAIU1kCO0zSYbVM62iI0nUuHhyPRG8NPWTbGCNqeJWVRfbWltpilksq9TLkzjgr6/3CTovrH7NR6T1tpkeW0gPpuJ4MWgPnyXiDWqd7hMJu0M7GvMiHWzmnHUOIYdONGbDLeZ6D4x9dfP7Z)作為參考,產生的效果如圖  ~~~html <script> import CompA from './CompA.vue' import CompB from './CompB.vue' export default { components: { CompA, CompB }, data() { return { current: 'CompA' } } } </script> <template> <div class="demo"> <label><input type="radio" v-model="current" value="CompA" /> A</label> <label><input type="radio" v-model="current" value="CompB" /> B</label> <!-- 寫法 一 --> <CompA v-if="current === 'CompA'"></CompA> <CompB v-else></CompB> <hr/> <!-- 寫法 二 --> <CompA v-show="current === 'CompA'"></CompA> <CompB v-show="current === 'CompB'"></CompB> <hr/> <!-- 寫法 三 --> <KeepAlive> <component :is="current"></component> </KeepAlive> </div> </template> ~~~ 主要原因是，`v-if `會銷毀組件進行組件的重新渲染，`v-show` 只是`css `情況的控制顯示隱藏并沒有進行銷毀因此可以保留切換前的顯示，`keep-alive` 完全是其本身的緩存組件狀態因此即使銷毀在出現依舊保持之前數據 2. 對于緩存的組件來說，再次進入時，我們是不會執行`created`或者`mounted`等生命周期，但是有時候**我們確實希望監聽到何時重新進入到了組件，何時離開了組件**，這個時候可以使用提供 `activated `和 `deactivated `這兩個生命周期鉤子函數來監聽,用來替代`mounted`和`unmounted` * compA 組件增加 `activated `和 `deactivated ` ~~~html <script> export default { data() { return { count: 0 } }, activated (){ console.log("進入緩存") }, deactivated (){ console.log("離開緩存") }, } </script> <template> <div> <p>Current component: A</p> <span>count: {{ count }}</span> <button @click="count++">+</button> </div> </template> ~~~ 3. ` keep-alive` 其他參數配置 ~~~ interface KeepAliveProps { /** * 如果指定，則只有與 `include` 名稱 * 匹配的組件才會被緩存。 */ include?: MatchPattern /** * 任何名稱與 `exclude` * 匹配的組件都不會被緩存。 */ exclude?: MatchPattern /** * 最多可以緩存多少組件實例,一旦達到這個數字，那么緩存組件中最近沒有被訪問的實例會被銷毀 */ max?: number | string } type MatchPattern = string | RegExp | (string | RegExp)[] ~~~ 4. 匹配首先檢查組件自身的 `name `選項,[參考B組件 增加了name 屬性后才在keep-alive 配置生效](https://sfc.vuejs.org/#eNqtVc1u00AQfpVhL23V2uZsORFxj4g38MW1J4mL7V3trt2iKFIvICFxQ0ggznDjxAVBJV6GUB6DWa/tOD9thIQUxd6db77Zmf1mvGATIdy6QuazQCUyE3oclVkhuNRwzgsxgankBRy5XrMy0KMNQLgBCFsAQFTidQNKcRpXuYaF2U0Iw0sstfJhYQOctTTLMwNIYx0fn1gwgERdybJbkXslJTn7cNS4NoEAluZBf/QLvD4JWmgsRB5rpBVAkGY1JHms1ChiKRY8Ys0+WfL4AvNxkJWi0qBfCCSEjNOMIFA7BU8xp502uNmL88pgmkPQ2hvDJPAsy3+gDC1luEX5yHFg9erD76/v4Ne3G3CczmDvqXay6ZoSRqNRXyU2Duz1DT1C8sBcYWsLO9tcevsifn+zJ6Ka86t/jXmfT7j26c4yPMxW/q8Hp3mKKCZ5ViPgdZJX6aCOnTMEvfIA/MxIoK89Be2NHaXXc1rteCQeegu8gaTYGbN94BSxcC8VL6mJGqlGrUFFjGRuKSNGnWHWEZtrLZTveWqamHa5VC6XM4/eXFmVOivQRVU4F5JfKZREHLGmNVoOjzZrlA4dPkWJ8iHOLegOb9c4lErf3huTYF8PH2hRTjn48HjYms3x40RnNVUuheOTFp3wUvEc3ZzPjiP25+fH1ctPd7dvV1/eR+xk7Ukhce19n/vd5x+r25sd98NDYa0RMT5vVdkLwjedLSxWibgct/ktFjZTWC6J3hgayEWlNS/hSZJnyXMjMoM5PSWRnQaeNW4IaldS/RQ9eA8AZVyg3zYPpXr4cgo1o9l5YGw+UKP9FaJBNazQM1QqniFkZsYvTMytItmhuJ6ChGg7tSuL+XxsFmb5F6ttOtU=) ~~~html <keep-alive include="home,about" :max="10"></keep-alive> <keep-alive :include="['home','about']" :max="10"></keep-alive> <KeepAlive :include="/a|b/" :max="10"></KeepAlive> ~~~ ~~~ <script> export default { name: "home", // 優先匹配這個name data() { return { counter: 0 } } } </script> ~~~ >[info] ## 參考 [KeepAlive](https://cn.vuejs.org/guide/built-ins/keep-alive.html#basic-usage) [KeepAlive 參數](https://cn.vuejs.org/api/built-in-components.html#keepalive)