Persönliche VUE-Zusammenfassung (aufgetretene Probleme)

Dieser Artikel ist eine Zusammenfassung meiner Erfahrungen mit Vue und der Fragen, die mir einige Community-Freunde gestellt haben. Interessierte Freunde sollten gemeinsam lernen

Vorwort

1. Die Daten der Routing-Änderungsseite werden nicht aktualisiert

Dies geschieht, weil die Parameter der abhängigen Route abgerufen und in geschrieben werden erstellter Lebenszyklus, da die gleiche Route zweimal oder sogar mehrmals geladen wird, wird die Überwachung nicht erreicht. Wenn Sie die Seite verlassen und eine andere Artikelseite aufrufen, wird der erstellte Komponentenlebenszyklus nicht ausgeführt, was dazu führt, dass die Artikeldaten immer noch die eingegebenen Daten sind das erste Mal.

Lösung: Beobachten Sie, ob sich die Route ändert.

watch: {
// 方法1
'$route'
 (to, 
from
) { 
//监听路由是否变化
if
(
this
.$route.
params
.articleId){
// 判断条件1 判断传递值的变化
//获取文章数据
  }
  }
//方法2
'$route'
(to, 
from
) {
if
 (to.path == 
"/page"
) { 
/// 判断条件2 监听路由名 监听你从什么路由跳转过来的
this
.message = 
this
.$route.query.msg  
  }
  }  
 }

2. Die Verwendung in der asynchronen Callback-Funktion kann nicht auf das Vue-Instanzobjekt verweisen

//setTimeout/setInterval ajax Promise等等
 data(){
return
{
  ...
  }
 },
 methods (){
   setTimeout(
function
 () { 
//其它几种情况相同
   console.log(
this
);
//此时this指向并不是vue实例 导致操作的一些ma'f
  },
1000
);
 }

Lösung: Variablenzuweisung und Pfeilfunktion. (Referenz: Der Unterschied zwischen var und let: http://www.jb51.net/article/134704.htm)

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

3.setInterval Routing-Sprung läuft weiter und nicht Fahren Sie rechtzeitig fort Zerstören

Zum Beispiel müssen einige Sperren und rotierender Text regelmäßig aufgerufen werden, nachdem die Route gesprungen ist, da die Komponente zerstört wurde, setInterval jedoch nicht zerstört wurde, Hintergrund Wenn weiterhin Anrufe ausgeführt werden, meldet die Konsole ständig Fehler. Wenn der Rechenaufwand groß ist, kann er nicht rechtzeitig gelöscht werden, was zu schwerwiegenden Einfrierungen der Seite führt.

Lösung: Stoppen Sie setInterval beforeDestroy im Komponentenlebenszyklus

 //组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。
 beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么停止。
  clearInterval(
this
.intervalId);
 },

4.vue-Scroll-Verhaltensnutzung, um die Route einzugeben, müssen Sie zum Ende scrollen Browser, Kopf usw.

Wenn Sie Front-End-Routing verwenden und zu einer neuen Route wechseln, möchten Sie, dass die Seite nach oben scrollt oder die ursprüngliche Scrollposition beibehält. Genau wie das Neuladen der Seite. vue-router kann das, aber besser: Sie können damit anpassen, wie die Seite beim Routenwechsel scrollt.

Hinweis: Diese Funktion ist nur in Browsern verfügbar, die History.pushState unterstützen.

Die Routing-Einstellungen lauten wie folgt: (Für Details klicken Sie hier: https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html)

const
 router = 
new
VueRouter
({
  mode: 
'history'
,
  scrollBehavior (to, 
from
, savedPosition) {
if
 (savedPosition) { 
//如果savedPosition存在，滚动条会自动跳到记录的值的地方
return
 savedPosition
   } 
else
 {
return
 { x: 
0
, y: 
0
 }
//savedPosition也是一个记录x轴和y轴位置的对象
   }
   }，
  routes: [...]
  })

5. Implementieren Sie das Vue-Routing, um die Anforderungen des Browsers abzufangen und eine Reihe von Vorgängen auszuführen, z. B. das Speichern von Entwürfen usw.

Szenario: Um zu verhindern, dass Benutzer Änderungen vornehmen Fehler durch Klicken auf die falsche Schaltfläche „Schließen“ usw., was dazu führt, dass die eingegebenen Informationen (Schlüsselinformationen) nicht gespeichert werden.

Verwendung:

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

Es gibt auch Lebenszyklusfunktionen wie beforeEach und beforeRouteUpdate. Klicken Sie hier für Details: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

6.v-once rendert Elemente und Komponenten nur einmal, Optimierte Rendering-Leistung aktualisieren

v-once Ich glaube, dieser Befehl wird selten von allen verwendet, aber ich persönlich finde ihn ziemlich praktisch!

Elemente und Komponenten nur einmal rendern. Bei nachfolgenden erneuten Renderings werden das Element/die Komponente und alle seine untergeordneten Elemente als statischer Inhalt behandelt und übersprungen. Dies kann zur Optimierung der Update-Leistung genutzt werden.

Ich werde hier kein Beispiel nennen, klicken Sie einfach hier: v-once（https://cn.vuejs.org/v2/api/#v-once）

7. Die lokale Proxy-Konfiguration von Vue löst domänenübergreifende Probleme, nur in der Entwicklungsumgebung

Dieser lokale Proxy wird verwendet, um domänenübergreifende Probleme in der domänenübergreifenden Entwicklungsumgebung zu lösen ist ein alltägliches Problem. Die Konfiguration des Proxys in vue ist sehr einfach:

//比方说你要访问 http://192.168.1.xxx:8888/backEnd/paper这个接口
//配置 config.js下面proxyTable对象
 proxyTable: {
'/backEnd'
:{
     target:
'http://192.168.3.200:8888'
, 
//目标接口域名有端口可以把端口也写上
//或者prot本地起服务端口与服务端统一
     changeOrigin:
true
, 
    }
 },
// 发送request请求
  axios.
get
(
'/backEnd/page'
) 
//按代理配置 匹配到/backEnd就代理到目标target地址
  .
then
((res) => {
   console.log(res) 
// 数据完全拿得到 配置成功
this
.newsList = res.data
  }, (err) => {
   console.log(err)
  })

8. Es gibt keine Probleme bei der lokalen Entwicklung, aber 404 bei der Bereitstellung des Servers

Aufgrund des Front-End-Routings sollten Single-Page-Anwendungen nicht gleichzeitig auf Web-Proxy-Servern wie Nginx, Apache und Tomcat platziert werden Gleichzeitig müssen Sie die Routing-Adresse von React oder Vue entsprechend dem Projektpfad Ihres eigenen Servers ändern.

Hinweis:

1. Vue-Router-Verlaufsmodus

2. Service Nginx-Konfiguration

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Nuxt.js Vue serverseitige Rendering-Erkundung

Was sind die Unterschiede zwischen let- und var-definierten Variablen in js?

veloticy-ui realisiert Textanimationseffekte

Das obige ist der detaillierte Inhalt vonPersönliche VUE-Zusammenfassung (aufgetretene Probleme). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!