You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/api/index.md
+24Lines changed: 24 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1779,6 +1779,10 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
1779
1779
1780
1780
### keep-alive
1781
1781
1782
+
-**Props:**
1783
+
-`include` - string or RegExp. Only components matched by this will be cached.
1784
+
-`exclude` - string or RegExp. Any component matched by this will not be cached.
1785
+
1782
1786
-**Usage:**
1783
1787
1784
1788
When wrapped around a dynamic component, `<keep-alive>` caches the inactive component instances without destroying them. Similar to `<transition>`, `<keep-alive>` is an abstract component: it doesn't render a DOM element itself, and doesn't show up in the component parent chain.
@@ -1807,6 +1811,26 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
1807
1811
</transition>
1808
1812
```
1809
1813
1814
+
-**`include` and `exclude`**
1815
+
1816
+
> New in 2.1.0
1817
+
1818
+
The `include` and `exclude` props allow components to be conditionally cached. Both props can either be a comma-delimited string or a RegExp:
1819
+
1820
+
```html
1821
+
<!-- comma-delimited string -->
1822
+
<keep-aliveinclude="a,b">
1823
+
<component:is="view"></component>
1824
+
</keep-alive>
1825
+
1826
+
<!-- regex (use v-bind) -->
1827
+
<keep-alive:include="/a|b/">
1828
+
<component:is="view"></component>
1829
+
</keep-alive>
1830
+
```
1831
+
1832
+
The match is first checked on the component's own `name` option, then its local registration name (the key in the parent's `components` option) if the `name` option is not available. Anonymous components cannot be matched against.
1833
+
1810
1834
<pclass="tip">`<keep-alive>` does not work with functional components because they do not have instances to be cached.</p>
0 commit comments