這篇文章帶給大家的內容是關於Vue內建元件：keep-alive元件的介紹與使用(附程式碼)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
keep-alive是 Vue 內建的元件，可以讓被包含的元件保留狀態，或避免重新渲染。
在vue 2.1.0 版本之後，keep-alive新加入了兩個屬性: include(包含的元件緩存) 與 exclude(排除的元件不緩存，優先權大於include) 。
使用方法
<keep-alive include='include_components' exclude='exclude_components'> <component> <!-- 该组件是否缓存取决于include和exclude属性 --> </component> </keep-alive>
參數解釋include - 字串或正規表示式，只有名稱匹配的元件會被快取exclude - 字串或正規表示式，任何名稱匹配的元件都不會被快取
include 和exclude 屬性允許元件有條件地快取。二者都可以用逗號分隔字串、正規表示式或一個陣列來表示。當使用正規或陣列時，一定要使用v-bind !
使用範例
<!-- 逗号分隔字符串，只有组件a与b被缓存。 --> <keep-alive include="a,b"> <component></component> </keep-alive> <!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) --> <keep-alive :include="/a|b/"> <component></component> </keep-alive> <!-- Array (需要使用 v-bind，被包含的都会被缓存) --> <keep-alive :include="['a', 'b']"> <component></component> </keep-alive>
router.meta屬性明確的指定該元件是否要快取##router.meta設定
...
{
path: 'edit',
component: () => import('@/views/site/edit'),
name: 'site.edit',
meta: {
title: '网址编辑',
hidden: true,
cache: false
}
},
{
path: 'list',
component: () => import('@/views/site/list'),
name: 'site.list',
meta: {
title: '网址列表',
hidden: false,
cache: true
}
},
...v-if標籤來判斷是否需要快取
<!-- 缓存 --> <keep-alive> <router-view v-if="$route.meta.cache"></router-view> </keep-alive> <!-- 不缓存 --> <router-view v-if="!$route.meta.cache"></router-view>
{
path: '/',
name: 'A',
component: A,
meta: {
cache: true // 需要被缓存
}
}export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.cache = true; // 让 A 缓存，即不刷新
next();
}
};export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.cache = false; // 让 A 不缓存，即刷新
next();
}
};created()方法是不會被執行的。而一般我們都會在created方法中去請求數據，加載列表，那麼如果當前頁面緩存了，後台數據有更新，就會造成數據不能及時顯示到前台，這時就需要手動刷新頁面了。 所以元件是否需要快取需要事情而定
export default {
data() {
return {};
},
created() {
// do some thing...
},
methods: {},
};以上是Vue內建元件：keep-alive元件的介紹與使用(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章！
