Vue 내장 구성 요소: 연결 유지 구성 요소 소개 및 사용(코드 포함)

이 기사의 내용은 Vue에 내장된 구성 요소인 연결 유지 구성 요소(코드 포함)의 소개 및 사용에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

keep-alive 소개

keep-alive는 포함된 구성 요소가 상태를 유지하거나 재렌더링을 방지할 수 있도록 하는 Vue의 내장 구성 요소입니다. keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法

<keep-alive include=&#39;include_components&#39; exclude=&#39;exclude_components&#39;>
  <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="[&#39;a&#39;, &#39;b&#39;]">
  <component></component>
</keep-alive>

使用场景

1、尽管可以通过正则表达式来include和exclude一些组件，但用的更多是通过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>

2、不同的页面切换，刷新规则不同：B->A不刷新， C-A刷新

路由A的配置

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

组件B配置

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

组件C配置

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

注意事项

如果组件被缓存，created()vue 버전 2.1.0 이후 keep-alive에는 include(포함된 구성 요소가 캐시됨) 및 제외(제외된 구성 요소가 캐시되지 않으며 포함보다 우선순위가 높음)라는 두 가지 새로운 속성이 추가되었습니다.

Usage

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

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

매개변수 설명

include - 문자열 또는 정규 표현식, 이름이 일치하는 구성 요소만 캐시됩니다.exclude - 문자열 또는 정규 표현식, 다음이 있는 모든 구성 요소 일치하는 이름은 캐시되지 않습니다. 포함 및 제외 속성을 사용하면 구성 요소를 조건부로 캐시할 수 있습니다. 둘 다 쉼표로 구분된 문자열, 정규식 또는 배열로 표시될 수 있습니다. 정규식이나 배열을 사용할 때는 반드시 v-bind를 사용하세요!

사용예

rrreee사용 시나리오

1. 정규식을 통해 일부 구성 요소를 포함하거나 제외할 수 있지만, 하지만 더 일반적으로 사용되는 것은 router.meta 속성

router.meta 구성rrreee

을 통해 구성 요소를 캐시해야 하는지 여부를 명시적으로 지정한 다음 전달하는 것입니다. 캐싱이 필요한지 여부를 결정하는 v-if 태그rrreee

2. 페이지 전환마다 새로 고침 규칙이 다릅니다: B->A는 새로 고치지 않고 C-A는 새로 고침

구성 Route A

rrreee 🎜컴포넌트 B 구성🎜rrreee🎜컴포넌트 C 구성🎜rrreee🎜Notes🎜🎜컴포넌트가 캐시된 경우 created() 메서드는 실행되지 않습니다. 일반적으로 create 메소드에서 데이터를 요청하고 목록을 로드합니다. 현재 페이지가 캐시되고 백그라운드 데이터가 업데이트되면 해당 데이터가 포그라운드에 표시되지 않습니다. 이때 페이지를 새로 고쳐야 합니다. 수동으로. 🎜따라서 구성 요소를 캐시해야 하는지 여부는 상황에 따라 다릅니다.🎜rrreee🎜관련 권장 사항:🎜🎜🎜vue 사용자 정의 선택 내장 구성 요소🎜🎜🎜🎜vue 내장 명령어 사용 요약🎜🎜🎜🎜🎜Vue 구성 요소 옵션 props🎜🎜

위 내용은 Vue 내장 구성 요소: 연결 유지 구성 요소 소개 및 사용(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!