Динамические и асинхронные компоненты

поддерживать динамические компоненты

Ранее мы использовали атрибут is для включения переключения между компонентами в интерфейсе с вкладками, как показано ниже:

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

Однако, когда мы переключаемся между этими компонентами, мы иногда хотим сохранить их состояние или по причинам производительности избегать повторного рендеринга.

Например, у вас есть приложение, в котором есть вкладка «Сообщения» и вкладка «Архив». Когда мы выбираем вкладку и переключаемся на вкладку «Архив», публикация будет отменена, поскольку Vue создаст новый экземпляр currentTabComponent.

Воссоздание динамических компонентов обычно является полезным поведением, но в приведенном выше случае нам бы очень хотелось, чтобы эти компоненты вкладок кэшировались при их первом создании.

Мы достигаем этого, оборачивая наш динамический компонент элементом <keep-alive>:

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

Асинхронные компоненты

При создании большого приложения может возникнуть необходимость разделить приложение на более мелкие части и только компонент, когда это необходимо. Vue делает это проще, позволяя нам определять наш компонент как фабричную функцию, которая асинхронно разрешает определение нашего компонента. Эта фабричная функция будет запускаться только тогда, когда компонент должен быть визуализирован, а результат будет кэширован для будущего повторного рендеринга:

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

Из приведенного выше фрагмента кода фабрика получает обратный вызов разрешения, который должен вызываться при получении определения нашего компонента с сервера.

Рекомендуемая альтернатива использованию setTimeout - использование асинхронных компонентов и функции разделения кода в Webpack:

Vue.component('async-webpack-example', function (resolve) {
// This special require syntax below will instruct Webpack to
  // automatically split your built code into bundles that
  // are loaded from an Ajax request.
    require(['./my-async-component'], resolve)
})

Кроме того, мы можем вернуть Promise в заводской функции, поэтому с ES6 и Webpack 2 мы можем сделать следующее:

Vue.component(
  'async-webpack-example',
  // The `import` function below returns a Promise.
  () => import('./my-async-component')
)```
When registering locally, we can also directly provide a function that returns a Promise:
```new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

Если вы предпочитаете использовать Browserify, а также хотите использовать асинхронные компоненты, обратите внимание, что создатель Browserify дал понять, что это не то, что Browserify никогда не будет поддерживать.

Состояние погрузки

Фабрика асинхронных компонентов также может возвращать объект в следующем формате:

const AsyncComponent = () => ({
  // The component to be load (should be a Promise)
  component: import('./MyComponent.vue'),
  // this is a component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // this will Delay before showing the loading component. The Default is: 200ms.
  delay: 200,
  // The error component will then be displayed if a timeout is
  // provided and is exceeded. Default: Infinity.
  timeout: 3000
})