标签:ice 没有 浏览器 定时 写文章 箭头 elf 公司 赋值
本篇是我在使用vue过程中,遇到的几个小问题和之前不了解的东西,记录下来,希望能够帮助各位踩坑。如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家。
场景:比如文章详情数据,依赖路由的
params
参数获取的(ajax写在created生命周期里面),因为路由懒加载的关系,退出页面再进入另一个文章页面并不会运行created组件生命周期,导致文章数据还是上一个文章的数据。
watch: {
‘$route‘ (to, from) { //监听路由是否变化
if(this.$route.params.articleId){//是否有文章id
//获取文章数据
}
}
}
mounted(){
setTimeout(function () { //setInterval同理
console.log(this);//此时this指向Window对象
},1000);
}
//箭头函数访问this实例 因为箭头函数本身没有绑定this
setTimeout(() => {
console.log(this);
}, 500);
//使用变量访问this实例
let self=this;
setTimeout(function () {
console.log(self);//使用self变量访问this实例
},1000);
比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后台调用,控制台会不断报错,如果运算量大的话,无法及时清除,会导致严重的页面卡顿。
组件销毁前执行的钩子函数,跟其他生命周期钩子函数的用法相同。
beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例,然后就可以像下面这么暂停。
clearInterval(this.intervalid);
},
这个我当时做的时候以为很难,后来做好了才发现就是一个设置而已(前提是要开启路由的History 模式),下面做一个简单的分享。
如果之前一直使用的是hash
模式(默认模式),项目已经开发了一段时间,然后转history模式很可能会遇到:这些问题
滚动行为具体设置如下:
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: [...]
})
vue滚动行为文档,可以进到这里看看更详细的信息。
为了防止用户突然离开,没有保存已输入的信息。
//在路由组件中:
mounted(){
},
beforeRouteLeave (to, from, next) {
if(用户已经输入信息){
//出现弹窗提醒保存草稿,或者自动后台为其保存
}else{
next(true);//用户离开
}
类似的还有beforeEach
、beforeRouteUpdate
,也分为全局钩子和组件钩子,见路由文档。
觉得v-once这个api蛮6的,应该很多小伙伴都没有注意到这个api。
这个api在我看来主要用于那些一次性渲染,并且不会再有操作更改这些渲染的值,这样就可以优化双向绑定的更新性能。
尽管在 Vue 中渲染 HTML 很快,不过当组件中包含大量静态内容时,可以考虑使用 v-once 将渲染结果缓存起来,就像这样:
Vue.component(‘terms-of-service‘, {
template: ‘ <div v-once> <h1>Terms of Service</h1> ...很多静态内容... </div> ‘
})
写到这里想到vue框架还有一个风格指南推荐,如下图所示,大家也可以学习一波。
上面就是我分享的几个小问题,希望大家看了能够有所收获!另:今年准备北上,如果小伙伴的公司有坑,可以联系一下我。
最后:如需转载,请放上原文链接并署名。码字不易,感谢支持!本人写文章本着交流记录的心态,写的不好之处,不撕逼,但是欢迎指点。然后就是希望看完的朋友点个喜欢,也可以关注一下我。
标签:ice 没有 浏览器 定时 写文章 箭头 elf 公司 赋值
原文地址:https://www.cnblogs.com/qiyan/p/10421647.html