Zusammenfassung einiger praktischer kleiner Zaubertricks in der Vue-Praxis

Wie können Sie das Lamaging von Routen vergessen, mit dem Sie beim ersten Mal schneller laden können?

Durch Routing Lazy Loading kann unser Paket nicht alle Seiten auf einmal laden, sondern nur die Routing-Komponenten der aktuellen Seite.

Wenn du es zum Beispiel so schreibst, werden alle beim Laden mitgeladen.

const router = neuer VueRouter({
  Routen:[
    {
      Weg: '/',
      Name: "Home",
      Komponente: Startseite
    },
    {
      Pfad: '/about',
      Name: 'Über',
      Komponente: Über
    }
  ]
})

Daher sollte das obige Schreiben vermieden und Lazy Loading so weit wie möglich verwendet werden.

Lazy Loading-Schreiben, kombiniert mit Webpack-Import

const router = neuer VueRouter({
  Routen:[
    {
      Weg: '/',
      Name: "Home",
      Komponente: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
    },
    {
      Pfad: '/about',
      Name: 'Über',
      Komponente: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]
})

Erinnern Sie sich, dass es eine Methode namens Object.freeze gab?

Alle Studierenden sollten wissen, dass bei der Initialisierung von Vue die Daten in Daten in responsive Daten umgewandelt werden. Wenn wir jedoch Geschäftslogik schreiben, werden sich einige Daten nach der Initialisierung nie ändern und müssen von Vue überhaupt nicht in responsive Daten umgewandelt werden. Daher sollten wir diese unveränderten Daten mit der Methode Object.freeze einfrieren, um einige nutzlose Vorgänge bei der Initialisierung von Vue zu vermeiden.

🌰

Standard exportieren {
  Daten:()=>({
    list:Object.freeze([{title:'Ich muss mich nie ändern, ich brauche keine Reaktionsfähigkeit'}])
  })
}

Asynchrone Komponenten sind so leistungsstark, haben Sie sie noch nie verwendet?

Asynchrone Komponenten ermöglichen es uns, einige Komponenten nur dann zu laden, wenn wir sie brauchen, anstatt sie zu Beginn der Initialisierung zu laden. Dies ist dasselbe Konzept wie das verzögerte Laden von Routen.

🌰

Standard exportieren {
  Komponenten: {
    AsyncComponent:()=>importieren(/* webpackChunkName: "AsyncComponent" */ './Async')
  }
}

Das zum ersten Mal geladene Paket enthält nicht den geänderten Komponentencode

Wenn ein Klick ein bestimmtes Verhalten auslöst, sieht das eingeführte Paket so aus

Es gibt auch eine umfassendere Möglichkeit, asynchrone Komponenten zu schreiben

🌰

Standard exportieren {
  Komponenten: {
    Asynchrone Komponente:()=>({
      Komponente: Importieren (/* webpackChunkName: "AsyncComponent" */ './Async'),
      delay:200, // Verzögerung in Millisekunden, Standard ist 200
      timeout:3000, //Timeout nach dem Laden für einige Millimeter, was den Fehler beim Laden der Komponente auslöst:LoadingComponent, //Fehler anzeigen, bevor die Komponente zurückgeladen wird:ErrorComponent //Anzeigen, wenn die Komponente ein Timeout hat })
  }
}

Verwenden Sie dies immer noch in Computern?

Ich schätze, es gibt immer noch viele Studenten, die this.xxx verwenden, um die Daten in Daten und die Methoden in Methoden im berechneten Attribut abzurufen. Vielleicht verwenden sie auch this.$store, um den Status und das Commit von vuex abzurufen, und verwenden sogar this.$route, um die Daten in der Route abzurufen. Tatsächlich können wir diese hässlichen Dinge vermeiden, die uns sogar unsichtbare Leistungsprobleme bescheren können. In der Praxis können die Daten, auf die wir dadurch zugreifen können, im ersten berechneten Parameter strukturiert werden.

🌰

Standard exportieren {
   haha({$attrs,$route,$store,$listeners,$ref}){
     // Sie können auch viele Attribute konstruieren, die Sie selbst ausdrucken können. 
   }
}

Wie vermeidet man die gleichzeitige Verwendung von v-if und v-for?

Warum sollten wir die gleichzeitige Verwendung von v-if und v-for für dasselbe Element vermeiden? Weil es im Quellcode von Vue einen Codeabschnitt gibt, der die Priorität von Anweisungen behandelt. Dieser Codeabschnitt verarbeitet zuerst v-for und dann v-if. Wenn wir also zwei Anweisungen zusammen in derselben Schicht verwenden, treten einige unnötige Leistungsprobleme auf. Wenn diese Liste beispielsweise 100 Daten enthält und diese in einigen Fällen nicht angezeigt werden müssen, führt vue dennoch eine Schleife aus, um die 100 Daten anzuzeigen und dann v-if zu beurteilen. Daher sollten wir diese Situation vermeiden.

Schlecht 🌰

    <h3 v-if="status" v-for="Artikel in 100" :key="Artikel">{{Artikel}}</h3>

Okay 🌰

    <Vorlage v-if="status" >
        <h3 v-for="Artikel in 100" :key="Artikel">{{Artikel}}</h3>
    </Vorlage>

Warum verwenden Sie nicht den leistungsstarken .sync-Modifikator?

Wenn Sie die Anzeige und das Ausblenden einer untergeordneten Komponente in der übergeordneten Komponente steuern möchten, übergeben Sie dann immer noch eine Eigenschaft und eine benutzerdefinierte Methode? Dies wird sehr problematisch. Sie können es auch mit dem Sync-Modifikator versuchen.

🌰

 // Vorlage für übergeordnete Komponente>
  <div>
    <Umschalten :show.sync = 'anzeigen'></Umschalten>
  </div>
</Vorlage>

//Komponente umschalten <template>
  <div>
    <div v-if="anzeigen">
    Komponenten ein- und ausblenden</div>
  <button @click="test">Komponente ausblenden</button>
  </div>
</Vorlage>
<Skript>

Standard exportieren {
  Requisiten: ['anzeigen'],
  Methoden: {
    prüfen(){
      dies.$emit('update:show',false)
    }
  }
}
</Skript>

Mit $attr und $listeners können Sie Komponenten wie eine Ente im Wasser kapseln!

Viele Studenten verwenden $attr und $listeners möglicherweise nicht oft, aber tatsächlich ermöglichen sie uns, Komponenten einiger Komponentenbibliotheken erneut zu kapseln, was sehr nützlich ist.

Hier ist eine kurze Einführung zu beiden:

$attr: Übergibt eine Komponente neben den von prop benötigten Attributen auch weitere Attribute außer prop, so werden diese Attribute in $attr gesammelt.

$listeners: Wenn eine Komponente ein benutzerdefiniertes Ereignis übergibt, die untergeordnete Komponente jedoch nicht durch Emit ausgelöst wird, werden diese benutzerdefinierten Methoden in $listeners gesammelt.

Hier ist eine einfache sekundäre Kapselung der Tabel-Komponente von ElementUI 🌰

<el-Tabelle 
   v-bind="$attrs"
   v-on="$listeners">
   <template v-for="Element in Spalte">
    <el-table-column v-bind="Element" />
   </Vorlage>
</el-Tabelle>
<Skript>
Standard exportieren {
  Requisiten:{
      Spalte:{
        Typ: Array,
        erforderlich: wahr
      }
   }
}
<Skript>

v-model hat auch so einen schönen Modifikator!

Es gibt drei nützliche Modifikatoren für v-model. Ich frage mich, ob Sie sie verwendet haben. Einer ist „lazy“, einer ist „number“ und einer ist „trimm“.

lazy: kann @input-Ereignisse in @blur-Ereignisse umwandeln

Zahl: Es können nur numerische Werte eingegeben werden

Trimmen: Räumen Sie die Räume auf beiden Seiten frei

🌰

   //faul
   <Eingabe v-Modell.lazy="msg" />
   //Nummer
   <Eingabe v-Modell.Nummer="msg" />
   //trimmen
   <Eingabe v-Modell.trim="msg" />

Wussten Sie, dass die Eigenschaften des V-Modells auch angepasst werden können?

Wenn Sie v-model für eine benutzerdefinierte Eingabekomponente verwenden möchten, müssen Sie einen Wert einführen und ein Eingabeereignis in der untergeordneten Komponente auslösen. Die standardmäßige Syntax von v-model ist eine Kombination dieser beiden Dinge.

🌰

// Übergeordnete Komponente <template>
  <div>
    <CustomInput v-Modell = 'msg' />
  </div>
</Vorlage>

//BenutzerdefinierteEingabe

<Vorlage>
  <div>
    <input Typ="Text" :Wert="Wert" @input="Test">
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Requisiten: ['Wert'],
  Methoden: {
    Prüfung(e){
      dies.$emit('Eingabe',e.Ziel.Wert)
    }
  },
}
</Skript>

Aber was ist, wenn die Komponente keine Eingabe, sondern ein Kontrollkästchen oder ein Optionsfeld ist? Ich möchte kein Wert- und Eingabeereignis erhalten, sondern ein eher semantisches Prüf- und Änderungsereignis. Was soll ich tun?

🌰

// Die übergeordnete Komponente muss nicht geändert werden …
//BenutzerdefinierteEingabe
<Vorlage>
  <div>
    <input type="checkbox" :aktiviert="aktiviert" @change="test">
  </div>
</Vorlage>
<Skript>
 Requisiten: ['aktiviert'],
 Modell:{
    Requisiten: 'überprüft',
    Ereignis: „Ändern“
  },
  Methoden: {
    Prüfung(e){
      dies.$emit('ändern',e.target.checked)
    }
  }
}
</Skript>

Verwenden Sie immer noch den ScrollTop-Bereich des Browsers, um durch Ihre Seite zu scrollen?

Manchmal denken wir zuerst an „scrollTop“, wenn wir das Bildlaufverhalten der Seite steuern. Tatsächlich haben wir eine zweite Option, nämlich den von VueRouter bereitgestellten scrollBehavior-Hook.

🌰

const router = neuer VueRouter({
  Routen:[...] ,
  scrollVerhalten(bis,von,Position){
      // Der Positionsparameter kann selbst gedruckt werden. Durch Klicken auf die linken und rechten Pfeile des Browsers wird return{ ausgelöst.
          // Hier können viele Parameter zurückgegeben werden, einige sind unten aufgeführt. Weitere Einzelheiten finden Sie auf der offiziellen Website x:100,
          y:100,
          Selektor: #App,
          Versatz: 200,
          //usw}
  }
})

Die nativen Ereignisse, die Sie für die untergeordneten Komponenten definiert haben, werden nicht wirksam?

Manchmal möchten wir auf Ereignisse einer untergeordneten Komponente achten, z. B. auf Klicks, aber egal, wie Sie klicken, es erfolgt keine Reaktion. Warum?

🌰

<Vorlage>
    <div>
        <Untergeordnetes Element @click="test"></Untergeordnetes Element>
    </div>
</Vorlage>
<Skript>
    Methoden:{
        prüfen(){}
    }
</Skript>

Denn wenn Sie es auf diese Weise schreiben, denkt Vue, Sie hätten ein Klickereignis angepasst und es müsse durch $emit('click') in der untergeordneten Komponente ausgelöst werden. Was ist, wenn ich es in der übergeordneten Komponente auslösen möchte? Hier kommt der native Modifikator ins Spiel.

🌰

<Vorlage>
    <div>
        <Kind @click.native="test"></Kind>
    </div>
</Vorlage>
<Skript>
    Methoden:{
        prüfen(){}
    }
</Skript>

Verwenden Sie Keep-Alive, um Ihren Seitenstatus zwischenzuspeichern!

Keep-Alive kann uns dabei helfen, zu verhindern, dass die vorherige Komponente beim Wechseln von Komponenten zerstört wird. Es wird häufig in Management-Hintergrundsystemen verwendet.

🌰

<am Leben erhalten>
    <Router-Ansicht></Router-Ansicht>
</am Leben erhalten>

Zusammenfassen

Dies ist das Ende dieses Artikels über ein wenig praktische Magie in der Vue-Praxis. Weitere relevante praktische Vue-Fähigkeiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!