Dynamische Komponenten und asynchrone Komponenten

Auf dieser Seite wird davon ausgegangen, dass Sie Komponentengrundlagen gelesen haben. Wenn Sie noch nicht viel über Komponenten wissen, empfehle ich Ihnen, es zuerst zu lesen.

Verzeichnis

• wird für dynamische Komponenten verwendet Keep-Alive

• Asynchrone Komponente

  • Der Ladestatus wird für dynamische Komponenten verwendet

Wir haben zuvor das is-Attribut verwendet, um verschiedene Komponenten in einer Multi-Tab-Oberfläche zu wechseln:

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

When in diesen When Beim Wechseln zwischen Komponenten möchten Sie manchmal den Status dieser Komponenten beibehalten, um Leistungsprobleme durch wiederholtes erneutes Rendern zu vermeiden. Erweitern wir zum Beispiel diese Benutzeroberfläche mit mehreren Registerkarten:

keep-aliveSie werden feststellen, dass Sie beim Auswählen eines Artikels zum Tag Archiv

und wechseln Wechseln Sie dann wieder zu

---

Beiträge

, die zuvor ausgewählten Artikel werden nicht mehr angezeigt. Dies liegt daran, dass Vue jedes Mal, wenn Sie zu einem neuen Tab wechseln, eine neue
-Instanz erstellt.

Das Wiederherstellen des Verhaltens dynamischer Komponenten ist oft sehr nützlich, aber in diesem Fall bevorzugen wir, dass die Komponenteninstanzen dieser Tags bei ihrer ersten Erstellung zwischengespeichert werden. Um dieses Problem zu lösen, können wir seine dynamische Komponente mit einem

-Element umschließen.

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

Werfen wir einen Blick auf die geänderten Ergebnisse:

Jetzt behält das Posts-Tag seinen Status (ausgewählter Beitrag), auch wenn es nicht so ist. Das Gleiche gilt zum Rendern. Den vollständigen Code finden Sie in dieser GeigecurrentTabComponent.

<keep-alive>Beachten Sie, dass

erfordert, dass die Komponente, zu der gewechselt wird, einen eigenen Namen hat, sei es durch die Option

der Komponente oder durch lokale/globale Registrierung.

Weitere Details zu

finden Sie im

API-Referenzdokument.

Asynchrone Komponenten

---

In großen Anwendungen müssen wir die Anwendung möglicherweise in kleinere Codeblöcke aufteilen und diese nur bei Bedarf verwenden. Einfach laden ein Modul vom Server. Der Einfachheit halber ermöglicht Ihnen Vue, Ihre Komponente als Factory-Funktion zu definieren, die Ihre Komponentendefinition asynchron analysiert. Vue löst die Factory-Funktion nur dann aus, wenn die Komponente gerendert werden muss, und speichert die Ergebnisse für zukünftiges erneutes Rendern zwischen. Zum Beispiel:

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

Wie Sie sehen können, erhält diese Factory-Funktion einen resolve-Rückruf, der aufgerufen wird, wenn Sie die Komponentendefinition vom Server erhalten. Sie können auch reject(reason) anrufen, um einen Ladefehler anzuzeigen. Das setTimeout hier dient zur Demonstration, wie Sie die Komponente erhalten, bleibt Ihnen überlassen. Ein empfohlener Ansatz besteht darin, asynchrone Komponenten mit Code-Splitting-Funktion von Webpack zu verwenden:

Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./my-async-component'], resolve)
})

Sie können auch ein Promise in der Factory-Funktion zurückgeben, also kombinieren Sie Webpack 2 mit ES2015 Wenn wir die Syntax zusammenfassen, können wir es so schreiben:

Vue.component(
  'async-webpack-example',
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

Bei Verwendung von lokale Registrierung können Sie auch direkt eine Rückgabe Promise bereitstellen Funktion:

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

Wenn Sie ein Browserify-Benutzer sind, der auch gerne asynchrone Komponenten verwendet, hat der Autor dieses Tools leider klar angegeben, dass asynchrones Laden " Wird von Browserify nicht unterstützt“, zumindest nicht offiziell. Die Browserify-Community hat einige Problemumgehungen gefunden, die für bestehende komplexe Anwendungen hilfreich sein können. Für andere Szenarien empfehlen wir die direkte Verwendung von Webpack, um erstklassige Async-Unterstützung integriert zu haben.

Bearbeitung des Ladestatus

2. 3.0 hinzugefügt

Die asynchrone Komponenten-Factory-Funktion kann hier auch ein Objekt im folgenden Format zurückgeben:

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

Hinweis: Wenn Sie die obige Syntax in der Routing-Komponente von Vue Router verwenden möchten, müssen Sie Vue verwenden Router-Version 2.4.0 .