Zusammenfassung mehrerer Probleme in der Vue-Praxis

Beim Praktizieren von Vue werden wir immer auf einige Probleme stoßen. In diesem Artikel werden wir diese Probleme auflisten und Lösungen mit Ihnen teilen, in der Hoffnung, allen zu helfen.

In diesem Artikel werden die von Einzelpersonen aufgetretenen Probleme wie folgt erfasst:

1. Die Routing-Änderungsseitendaten aktualisieren das Problem nicht

2. setTimeout/setInterval weist auf eine Änderung hin und kann nicht für den Zugriff auf die VUe-Instanz verwendet werden

3. setInterval-Routensprung läuft weiter und wird nicht zerstört

4. Vue-Scrollverhalten (Browser-Fallback-Speicherposition) Verwendung

5. Vue-Routing fängt Browser-Rollback ab, um ähnliche Anforderungen für das Speichern von Entwürfen zu implementieren

6. v -Once rendert Elemente und Komponenten nur einmal, optimiert und aktualisiert die Rendering-Leistung

7. Vue-Framework-Styleguide-Empfehlung: Beispielsweise werden die Artikeldetaildaten mithilfe des

   -Parameters abgerufen Die Route (Ajax wird in den erstellten Lebenszyklus geschrieben. Aufgrund des verzögerten Ladens der Route führt das Verlassen der Seite und das Aufrufen einer anderen Artikelseite nicht dazu, dass der Lebenszyklus der erstellten Komponente ausgeführt wird, was dazu führt, dass die Artikeldaten immer noch die Daten der Route sind.) vorheriger Artikel.

Lösung: Beobachten Sie, ob sich das Routing ändert

setTimeout/setInterval dieser Zeiger ändert sich, Sie können damit nicht auf die VUe-Instanz zugreifen params

Szenario:

 watch: {
  '$route' (to, from) { //监听路由是否变化
    if(this.$route.params.articleId){//是否有文章id
      //获取文章数据
    }
  }
}

Lösung: Verwenden Sie die Pfeilfunktion oder

setInterval-Routensprung, um ohne Zerstörung weiterzulaufen

  mounted(){ 
        setTimeout(function () { //setInterval同理 
          console.log(this);//此时this指向Window对象
        },1000);
    }

Szenario:

Zum Beispiel ein Sperrfeuer, rotierender Text, Diese Art von Aufruf muss regelmäßig aufgerufen werden, da die Komponente zerstört wurde, setInterval jedoch nicht zerstört wurde und der Hintergrundaufruf weiterhin ausgeführt wird Der Berechnungsbetrag ist groß und kann nicht rechtzeitig gelöscht werden, was schwerwiegende Folgen haben kann. Die Seite friert ein.

    //箭头函数访问this实例 因为箭头函数本身没有绑定this
     setTimeout(() => { 
       console.log(this);
    }, 500);
    //使用变量访问this实例
    let self=this;
        setTimeout(function () {  
          console.log(self);//使用self变量访问this实例
        },1000);

Lösung: Stoppen Sie setInterval im Komponentenlebenszyklus vor Zerstörung

Die Hook-Funktion, die vor der Zerstörung der Komponente ausgeführt wird, ist dieselbe wie bei anderen Life-Cycle-Hook-Funktionen.

Nutzung des Vue-Scrollverhaltens (Browser-Rollback-Speicherposition)

Als ich das tat, dachte ich, dass es sehr schwierig sei, aber später fand ich heraus, dass es nur eine Einstellung war (vorausgesetzt). Um den Verlaufsmodus des Routings zu aktivieren, führen wir unten eine einfache Freigabe durch.

Routing-Einstellungen

beforeDestroy(){
     //我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么暂停。
    clearInterval(this.intervalid);
},

Um diese Funktion nutzen zu können, müssen Sie zunächst den Verlaufsmodus des Vue-Routers aktivieren

Wenn Sie haben dies schon einmal gemacht. Der
1. -Modus (Standardmodus) wird verwendet. Das Projekt wurde für einen bestimmten Zeitraum entwickelt, und dann werden beim Wechsel in den Verlaufsmodus wahrscheinlich die folgenden Probleme auftreten:

Die spezifischen Einstellungen für das Scrollverhalten sind wie folgt:

hash const router = new VueRouter({

mode: 'history',

scrollBehavior (to, from, savingPosition ) {
1. //savedPosition

   Routen: [...]
   })
   
   

   if (savedPosition) { //如果savedPosition存在，滚动条会自动跳到记录的值的地方
     return savedPosition
   } else {
     return { x: 0, y: 0 }//savedPosition也是一个记录x轴和y轴位置的对象
    }
   }，

   Vue-Scrollverhaltensdokument, Sie können hier gehen um detailliertere Informationen zu sehen.

   
   Vue Routing fängt die Browserunterstützung ab, um ähnliche Anforderungen zum Speichern von Entwürfen zu implementieren

Szenario:

Um zu verhindern, dass der Benutzer plötzlich geht, werden die eingegebenen Informationen nicht gespeichert.

Verwendung:

Zu den ähnlichen gehören

und

, die ebenfalls in globale Hooks und Komponenten-Hooks unterteilt sind. Siehe Routing-Dokumentation.

v-once rendert Elemente und Komponenten nur einmal und optimiert und aktualisiert die Rendering-Leistung

//在路由组件中：
mounted(){
},
beforeRouteLeave (to, from, next) {
  if(用户已经输入信息){
    //出现弹窗提醒保存草稿，或者自动后台为其保存
    
  }else{
    next(true);//用户离开
  }

Ich denke, die API von v-once ist ziemlich 6, und viele Freunde haben diese API vielleicht nicht bemerkt. beforeEachbeforeRouteUpdateDokumenteinführung:

Meiner Meinung nach wird diese API hauptsächlich für das einmalige Rendern verwendet und nicht erneut betrieben Ändern Sie diese gerenderten Werte, um die Aktualisierungsleistung für bidirektionale Bindungen zu optimieren.

Dokumentationsempfehlung: Verwenden Sie v-once für statische Komponenten mit geringem Overhead.Obwohl das Rendern von HTML in Vue schnell ist, können Sie die Verwendung von v-once in Betracht ziehen, wenn die Komponente viel Cache für statische Inhalte enthält Das Rendering-Ergebnis sieht folgendermaßen aus:

Vue-Styleguide-Empfehlung:

Als ich dies schrieb, dachte ich, dass das Vue-Framework auch eine Styleguide-Empfehlung hat, wie in der Abbildung unten gezeigt. Jeder kann auch eine Welle lernen.

Vue.component('terms-of-service', {
  template: '\
    <p v-once>\
      <h1>Terms of Service</h1>\
      ...很多静态内容...\
    </p>\
  '
})

Verwandte Empfehlungen:

Vue.js2.0 Änderungszusammenfassungsfreigabe

Vue.js 2.5 neue Funktionen teilen

Detaillierte Erläuterung der Komponenten und Vorlagen von Vue.js

Das obige ist der detaillierte Inhalt vonZusammenfassung mehrerer Probleme in der Vue-Praxis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!