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!
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
}
}
}//setTimeout/setInterval ajax Promise等等
data(){
return
{
...
}
},
methods (){
setTimeout(
function
() {
//其它几种情况相同
console.log(
this
);
//此时this指向并不是vue实例 导致操作的一些ma'f
},
1000
);
}//使用变量访问this实例
let
self
=
this
;
setTimeout(
function
() {
console.log(
self
);
//使用self变量访问this实例
},
1000
);
//箭头函数访问this实例 因为箭头函数本身没有绑定this
setTimeout(() => {
console.log(
this
);
},
500
);Lösung: Stoppen Sie setInterval
im Komponentenlebenszyklus vor der Zerstörung //组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。
beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么停止。
clearInterval(
this
.intervalId);
},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: [...]
})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
);
//用户离开
}
}
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）
//比方说你要访问 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)
})Empfohlene Lektüre:
vue ändert den Status des aktuell ausgewählten ElementsDetaillierte Erklärung der Verwendung von Vue besser -scrolls Scroll-Plug-inDas 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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
