bug记录:输入框延迟、卡顿
问题场景
离开本页签时(即点击其他页签时),存储查询数据。导致 bug:首次打开页签,或者点击浏览器按钮刷新时后,页面上的输入框输入后,会出现无法输入、延迟显示、输入卡顿。
代码如下:
/* === initDataMixin.js === */
beforeRouteLeave(to, from, next) {
// 跳转路由之前,存储滚动条位置
this.$store.dispatch("queryData/changeQuery", {
key: "scrollY",
value: {
[from.path]: window.scrollY,
},
});
// 离开本页签时(即点击其他页签时),存储查询数据
this.saveQueryParamsFn();
next();
},
methods: {
// 保存查询参数
saveQueryParamsFn() {
this.$store.dispatch("queryData/changeQuery", {
key: "queryParams",
value: {
[this.path]: this.queryParams,
},
});
},
},
修改
改为:发送查询请求后,存储查询数据。上述 bug 消失。
代码如下:
/* === initDataMixin.js === */
beforeRouteLeave(to, from, next) {
// 跳转路由之前,存储滚动条位置
this.$store.dispatch("queryData/changeQuery", {
key: "scrollY",
value: {
[from.path]: window.scrollY,
},
});
next();
},
methods: {
// 保存查询参数 // initData() 方法末尾(即发送查询请求后调用),存储查询数据
saveQueryParamsFn() {
this.$store.dispatch("queryData/changeQuery", {
key: "queryParams",
value: {
[this.path]: this.queryParams,
},
});
},
},
/* === 使用 initDataMixin 的 vue 页面 === */
methods: {
// 根据 initDataMixin,必须要有 initData()
initData() {
this.loadPage();
},
// 加载页面
loadPage() {
// 请求查询接口数据
// ……
// 存储查询参数
this.saveQueryParamsFn();
},
}
本文来自博客园,作者:shayloyuki,转载请注明原文链接:https://www.cnblogs.com/shayloyuki/p/18018890
posted on 2024-02-18 10:33 shayloyuki 阅读(15) 评论(0) 编辑 收藏 举报