Dieses Mal werde ich Ihnen die Punkte vorstellen, bei denen es bei der Verwendung von VUE leicht zu Fehlern kommen kann. Werfen wir einen Blick darauf. Vue kann jetzt als dunkles Pferd bezeichnet werden, Github
Die Anzahl der Sterne steht an erster Stelle! Vue wird immer häufiger in der Front-End-Entwicklung verwendet, und seine Vorteile werden hier nicht vorgestellt. Dieser Artikel ist eine Zusammenfassung des Prozesses der Verwendung von Vue und der von einigen Community-Freunden gestellten Fragen, um allen zu helfen, Fallstricke zu vermeiden. Wenn es Ihnen gefällt, können Sie es mögen oder ihm folgen. Ich hoffe, dieser Artikel kann allen helfen!
1. Die Daten der Routing-Änderungsseite werden nicht aktualisiert
Diese Situation tritt auf, weil die Parameter der abhängigen Route im erstellten
Lebenszyklus
abgerufen und geschrieben werden. Da dieselbe Route zweimal oder sogar mehrmals geladen wird, wird die Überwachung nicht erreicht nicht Der erstellte Komponentenlebenszyklus wird ausgeführt, wodurch die Artikeldaten zum ersten Mal eingegeben werden.
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
}
}
}Nach dem Login kopieren
2. Die Verwendung davon in der asynchronen Rückruffunktion kann nicht auf das Vue-Instanzobjekt
verweisen
Lösung: Variablenzuweisung und Pfeilfunktionen. (Referenz: Der Unterschied zwischen var und let: http://www.jb51.net/article/134704.htm)
//setTimeout/setInterval ajax Promise等等
data(){
return
{
...
}
},
methods (){
setTimeout(
function
() {
//其它几种情况相同
console.log(
this
);
//此时this指向并不是vue实例 导致操作的一些ma'f
},
1000
);
}Nach dem Login kopieren
//使用变量访问this实例
let
self
=
this
;
setTimeout(
function
() {
console.log(
self
);
//使用self变量访问this实例
},
1000
);
//箭头函数访问this实例 因为箭头函数本身没有绑定this
setTimeout(() => {
console.log(
this
);
},
500
);Nach dem Login kopieren
3.setInterval Routensprung läuft weiter und wird nicht rechtzeitig zerstört
Beispielsweise müssen einige Sperren und rotierender Text regelmäßig aufgerufen werden. Da die Komponente zerstört wurde, setInterval jedoch noch nicht zerstört wurde und der Hintergrundaufruf noch andauert, meldet die Konsole weiterhin Fehler. Wenn die Berechnungsmenge groß ist, kann es zu schwerwiegenden Seiteneinfrierungen kommen, wenn sie nicht rechtzeitig gelöscht wird.
Lösung: Stoppen Sie setInterval
im Komponentenlebenszyklus vor der Zerstörung
//组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。
beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么停止。
clearInterval(
this
.intervalId);
},Nach dem Login kopieren
4.vue-Scrollverhalten: Um die Route einzugeben, müssen Sie zum unteren Rand des Browsers, zum Kopf usw. scrollen.
Wenn Sie das 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 beim Neuladen der Seite. vue-router kann es, aber besser: Es ermöglicht Ihnen, benutzerdefiniert
zu definieren, wie die Seite scrollt, wenn das Routing
umgeschaltet wird.
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 auf: 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: [...]
})Nach dem Login kopieren
5. Implementieren Sie 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 der Benutzer versehentlich auf die Schaltfläche „Schließen“ usw. klickt, was dazu führt, dass die eingegebenen Informationen (Schlüsselinformationen) nicht gespeichert werden.
Verwendung:
Es gibt auch Lebenszyklusfunktionen wie beforeEach und beforeRouteUpdate. Klicken Sie hier für Details: https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
//在路由组件中：
...
beforeRouteLeave (to,
from
,
next
) {
if
(用户已经输入信息){
//出现弹窗提醒保存草稿，或者自动后台为其保存
}
else
{
next
(
true
);
//用户离开
}
}Nach dem Login kopieren
6.v-once rendert Elemente und Komponenten nur einmal und optimiert und aktualisiert die Rendering-Leistung
Ich glaube, dass der Befehl v-once selten von jedem verwendet wird, aber ich persönlich finde ihn ziemlich praktisch!
Elemente und Komponenten werden nur einmal gerendert. 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. Lokale Vue-Proxy-Konfiguration zur Lösung domänenübergreifender Probleme, beschränkt auf die Entwicklungsumgebung
Dieser lokale Proxy wird verwendet, um domänenübergreifende Probleme in der Entwicklungsumgebung zu lösen. Es ist sehr einfach, den Proxy in vue zu konfigurieren:
//比方说你要访问 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)
})Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
vue ändert den Status des aktuell ausgewählten Elements
Detaillierte Erklärung der Verwendung von Vue besser -scrolls Scroll-Plug-in
Das obige ist der detaillierte Inhalt vonPunkte, an denen VUE fehleranfällig ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
