Close read Vue official documentation series 🎉

keep-alive

The

element caches the state of the component, preventing it from being re-rendered. Can be used with normal components or with < Component > dynamic components.

<! -- Deactivated components will be cached! -->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>
Copy the code

Use

to cache the component state. The cached component must provide a name.

The

component uses the following attributes:

  • include: Values are strings, arrays, and regular expressions. Only matching component names are cached.
  • exclude: Values are strings, arrays, and regular expressions. Only components that are not matched are cached.
  • max: Sets the maximum number of cache entries.
<! -- comma-separated string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
Copy the code

Keep-alive activates cached components on/off, so only one child will be rendered at a time. If you add more than one child (such as using V-for), keep-alive will not work.


When a cached component is switched, the activated and Deactivated life cycles of all cached components in the Keep-alive tree are triggered.

Does not work in functional components because they do not have cached instances.

Asynchronous components

Load components on demand with Webpack’s code-Splitting technology.

Globally register asynchronous components

The Vue.component() method can not only register global components, but also obtain instance objects of the corresponding global components by component name.

// Register the global component
Vue.component(Button.name, Button);

// Get the global component constructor
const AButton = Vue.component(Button.name);
Copy the code

When Vue.com ponent (name, Object | Function) method of the second parameter is a Function can return Promise Object, then can to register a global asynchronous components.

Vue.component(
    'async-component'.// This dynamic import returns a Promise object.
    () = >import('./async-component-content'));Copy the code

Local registration of asynchronous components

We register the asynchronous component in the component’s Components option just as we would register a normal local component, again providing a function that returns a Promise object.

{
    components: {'async-component':() = >import('./async-component')}}Copy the code

Handling load state

Asynchronous loading components must have a loading process, and there may be loading success or failure state, affected by the network, and need to solve other situations such as timeout.

If we need to handle the loading status of an asynchronous component, we can use an asynchronous component factory function to return an object of the following format:

const AsyncComponent = () = > ({
  // The component to load (should be a 'Promise' object)
  component: import('./MyComponent.vue'),
  // The component used when the asynchronous component is loaded
  loading: LoadingComponent,
  // The component used when loading failed
  error: ErrorComponent,
  // Display the component delay time when loading. The default is 200 (ms)
  delay: 200.// If a timeout is provided and the component loads time out,
  // Use the component used when the load failed. The default value is' Infinity '
  timeout: 3000
})
Copy the code