Vue3 compilerOptions-Eigenschaft

Vue3 选项式 APIVue3 Options API

In Vue 3,compilerOptionsist ein Objekt, das zum Konfigurieren von Vues Template-Compiler verwendet wird.

Der Template-Compiler ist dafür verantwortlich, Vues Template-Syntax (wie z. B.v-bind、v-ifusw.) in JavaScript-Code umzuwandeln. DadurchcompilerOptionskönnen Entwickler das Verhalten des Compilers steuern, z. B. wie mit Whitespace umgegangen wird, ob bestimmte Optimierungen aktiviert sind und so weiter.

Häufige compilerOptions-Konfigurationen

1. whitespace

Zweck: Steuert, wie Whitespace in Templates behandelt wird.

Mögliche Werte：

  • 'preserve': Allen Leerraum beibehalten.
  • 'condense': Zusätzlichen Leerraum komprimieren.
  • 'collapse': Allen unnötigen Leerraum entfernen.

Beispiel

const app = createApp(App, {
  compilerOptions: {
    whitespace: 'condense'
  }
});

2. Kommentare

    Zweck: Steuert, ob Kommentare in Vorlagen beibehalten werden.

    Mögliche Werte：

    • true: Kommentare beibehalten.
    • false: Kommentare entfernen.

    Beispiel

    const app = createApp(App, {
      compilerOptions: {
        comments: false
      }
    });

    3. Trennzeichen

    Zweck: Passt die Interpolations-Trennzeichen in Vorlagen an. Standardmäßig verwendet Vue{{ }}als die Interpolations-Trennzeichen.

    Beispiel

    const app = createApp(App, {
      compilerOptions: {
        delimiters: ['${', '}']
      }
    });

    Ergebnis: In Templates können Sie verwenden${ expression }anstelle von{{ expression }}。

    4. isCustomElement

    Zweck: Legt fest, welche Tags als benutzerdefinierte Elemente behandelt werden sollen, statt als Vue-Komponenten.

    Beispiel

    const app = createApp(App, {
      compilerOptions: {
        isCustomElement: tag => tag.startsWith('my-')
      }
    });

    Ergebnis: Alle Tagsmy-die mit dem Präfix beginnen, werden als benutzerdefinierte Elemente behandelt.

    Wie verwendet man compilerOptions?

    compilerOptionsNormalerweise, wenn man eine Vue-Anwendung erstellt, übercreateAppden zweiten Parameter der Methode zur Konfiguration. Das Folgende ist ein vollständiges Beispiel:

    Beispiel

    import { createApp } from 'vue';
    import App from './App.vue';

    const app = createApp(App, {
      compilerOptions: {
        whitespace: 'condense',
        comments: false,
        delimiters: ['${', '}'],
        isCustomElement: tag => tag.startsWith('my-')
      }
    });

    app.mount('#app');

    Vue3 选项式 APIVue3 Options API

    Weitere Erweiterungen