Vue built-in components: introduction and use of keep-alive components (with code)

The content of this article is about Vue’s built-in components: the introduction and use of keep-alive components (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

keep-alive Introduction

keep-alive is a built-in component of Vue that allows included components to retain state or avoid re-rendering.
After the vue 2.1.0 version, keep-alive has added two new attributes: include (included components are cached) and exclude (excluded components are not cached and have a higher priority than include).

Usage

<keep-alive>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

Parameter explanation
include - string or regular expression, only components with matching names will be cached
exclude - String or regular expression, any component with a matching name will not be cached
The include and exclude attributes allow components to be cached conditionally. Both can be represented as a comma-separated string, a regular expression, or an array. When using regular expressions or arrays, be sure to use v-bind !

Usage examples

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive>
  <component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive>
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive>
  <component></component>
</keep-alive>

Usage scenarios

1. Although you can use regular expressions Expressions to include and exclude some components, but more commonly used are to explicitly specify whether the component should be cached through the router.meta attribute

router.meta configuration

...
    {
        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
        }
    },
...

Then use the v-if tag to determine whether caching is needed

<!-- 缓存 -->
<keep-alive>
    <router-view></router-view>
</keep-alive>

<!-- 不缓存 -->
<router-view></router-view>

2. Different page switching has different refresh rules: B->A does not refresh, C-A refresh

Route A configuration

{
        path: '/',
        name: 'A',
        component: A,
        meta: {
            cache: true // 需要被缓存
        }
}

Component B configuration

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 设置下一个路由的 meta
            to.meta.cache = true;  // 让 A 缓存，即不刷新
            next();
        }
};

Component C configuration

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.cache = false; // 让 A 不缓存，即刷新
            next();
        }
};

Note

If the component is Cache, created() method will not be executed. Generally, we will request data and load the list in the created method. If the current page is cached and the background data is updated, the data will not be displayed in the foreground in time. At this time, the page needs to be refreshed manually.
So whether the component needs to be cached depends on things

export default {
        data() {
            return {};
        },

        created() {
            // do some thing...
        },
        methods: {},
};

Related recommendations:

vue Custom select built-in component

vue Summary of built-in directive usage

Vue component option props

The above is the detailed content of Vue built-in components: introduction and use of keep-alive components (with code). For more information, please follow other related articles on the PHP Chinese website!