vue2.x study notes (seventeen)

Then the previous content: https://www.cnblogs.com/yanggb/p/12616847.html .

Dynamic components & asynchronous components

I have studied dynamic components while learning the basics of components. The official document gave an example: using the [is] attribute to switch between different components in a multi-tab interface:

<component v-bind:is="currentTabComponent"></component>

In the above example, switching components will create a new instance, which means that some operations you did in the previous component will not be saved. But when switching between these components, you sometimes want to maintain the state of these components to avoid performance issues caused by repeated rendering. Therefore vue provides a special label to solve this scenario.

Use keep-alive on dynamic components

The behavior of recreating dynamic components is usually very useful, but sometimes we may want some component instances to be cached when they are first created. To solve this problem, we can use a <keep-alive> element to wrap its dynamic components.

<!- Inactive components will be cached! -> 
< keep-alive > 
  < component v-bind: is = "currentTabComponent" > </ component > 
</ keep-alive >

However, it should be noted that this <keep-alive> element requires that the component to be switched to must have its own name, whether it is through the component ’s [name] option or local / global registration, otherwise unexpected problems will occur .

Asynchronous component

In large applications, we may need to split the application into smaller code blocks, and only load a module from the server when needed. For simplicity, vue allows you to define your component in the form of a factory function, which will parse your component definition asynchronously. Vue will only trigger the factory function when this component needs to be rendered, and will cache the results for future re-rendering, for example:

Vue.component ('async-example', function (resolve, reject) { 
  setTimeout ( function () {
     // Transfer the component definition to the resolve callback 
    resolve ({ 
      template: '<div> I am async! </ Div>' 
    } ) 
  }, 1000 ) 
})

As you can see, this factory function will receive a resolve callback, which will be called when you get the component definition from the server. Similarly, you can also call [reject (reason)] to indicate that the load failed. The setTimeout here is for demonstration purposes. How to get the components depends on you. A recommended approach is to use asynchronous components together with the code-splitting function of webpack:

Vue.component ( 'the async-WebPACK-Example', function (Resolve) {
   // this require special syntax will tell WebPACK 
  // automatically you build the code into a plurality of packets, which 
  // via an Ajax request Load 
  require (['./ my-async-component' ], resolve) 
})

You can also return a promise in the factory function, so adding the syntax of webpack 2 and es2015 together, we can write it like this:

Vue.component (
   'async-webpack-example' ,
   // This import function will return a Promise object. 
  () => Import ('./ my-async-component' ) 
)

When using local registration, you can also directly provide a function that returns a promise:

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

In addition, the author clearly stated that asynchronous loading of components will not be officially supported by browserify, so the official documentation recommends using webpack directly to have built-in first-class asynchronous support.

Handle loading status

Vue also added a new syntax in 2.3.0+ to support the asynchronous component factory function to return an object in the following format:

const AsyncComponent = () => ({
   // Component to be loaded (should be a Promise object) 
  component: import ('./ MyComponent.vue' ),
   // Component used when 
  loading asynchronous components : loadingComponent,
   // The component used when the load fails 
  error: ErrorComponent,
   // Show the delay time of the component when loading. The default value is 200 (milliseconds) 
  delay: 200 ,
   // If a timeout is provided and the component is also loaded, 
  // use The component used when loading failed. The default value is: Infinity 
  timeout: 3000 
})

But it should be noted that if you want to use the above syntax in the routing component of vue router, you must use vue router version 2.4.0+.

 

"I still like you very much, like lightly flipping the palace Shangjiao Zhengyu, shocking Yun Ni."