Vue study notes - depth component (Dynamic Components / asynchronous component)

In dynamic assembly for use  keep-alive:

When switching between these components, you sometimes want to hold these components in order to avoid performance problems caused by repeatedly re-rendering

 

 

Asynchronous component: In large applications, we may need to apply into smaller blocks of code , and only one module loaded from the server only when needed. To simplify, Vue allows you to define your component by way of a factory function , this factory function asynchronously parse your component definition. Vue Only in this component needs to be rendered when the plant will trigger function, and the result will be cached for future re-rendering . E.g:

 

Asynchronous component

<component :is="currentTabComponent"></component>

components: {
    homePage: function(resolve) {
        require(['../homePage'], resolve)
    },
    resourceManage: function(resolve) {
        require(['../resourceManage'],resolve)
    }
}

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

the require such a request success with callback data in asynchronous resolve

Factory function will receive a  resolve callback

You can also return a factory function Promise

 

Vue.component (
   ' the async-WebPACK-Example ' ,
   // this function will return a `import`` Promise` objects. 
  () => Import ( ' ./my-async-component ' ) 
)

Local register directly with a promise to return function

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