我们在vue实践过程中总会遇到些问题，本文我们就针对这些问题罗列出来并向大家分享解决办法，希望能帮助到大家。
本篇记录个人遇到的问题如下:
路由变化页面数据不刷新问题
setTimeout/setInterval this指向改变，无法用this访问VUe实例
setInterval路由跳转继续运行并没有销毁
立即学习“前端免费学习笔记（深入）”；
vue 滚动行为(浏览器回退记忆位置)用法
vue路由拦截浏览器后退实现草稿保存类似需求
v-once 只渲染元素和组件一次，优化更新渲染性能
vue框架风格指南推荐
路由变化页面数据不刷新问题
场景：比如文章详情数据，依赖路由的params参数获取的(ajax写在created生命周期里面)，因为路由懒加载的关系，退出页面再进入另一个文章页面并不会运行created组件生命周期，导致文章数据还是上一个文章的数据。
解决方法：watch监听路由是否变化
watch: { '$route' (to, from) { //监听路由是否变化 if(this.$route.params.articleId){//是否有文章id //获取文章数据 } }}
登录后复制
setTimeout/setInterval this指向改变，无法用this访问VUe实例
场景：
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路由跳转继续运行并没有销毁
场景：
比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在继续后台调用，控制台会不断报错，如果运算量大的话，无法及时清除，会导致严重的页面卡顿。
解决办法：在组件生命周期beforeDestroy停止setInterval
组件销毁前执行的钩子函数，跟其他生命周期钩子函数的用法相同。
beforeDestroy(){ //我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么暂停。 clearInterval(this.intervalid);},
登录后复制
vue 滚动行为(浏览器回退记忆位置)用法
这个我当时做的时候以为很难，后来做好了才发现就是一个设置而已（前提是要开启路由的History 模式），下面做一个简单的分享。
路由设置
要使用这一功能，首先需要开启vue-router的 history模式
如果之前一直使用的是hash 模式(默认模式)，项目已经开发了一段时间，然后转history模式很可能会遇到：这些问题
滚动行为具体设置如下：
const router = new VueRouter({
mode: ‘history’,
scrollBehavior (to, from, savedPosition) {
//savedPosition
if (savedPosition) { //如果savedPosition存在，滚动条会自动跳到记录的值的地方 return savedPosition} else { return { x: 0, y: 0 }//savedPosition也是一个记录x轴和y轴位置的对象 }}，
登录后复制
routes: […]
})
vue滚动行为文档，可以进到这里看看更详细的信息。
vue路由拦截浏览器后退实现草稿保存类似需求
场景：
为了防止用户突然离开，没有保存已输入的信息。
用法：
//在路由组件中：mounted(){},beforeRouteLeave (to, from, next) { if(用户已经输入信息){ //出现弹窗提醒保存草稿，或者自动后台为其保存 }else{ next(true);//用户离开 }
登录后复制
类似的还有beforeEach、beforeRouteUpdate，也分为全局钩子和组件钩子，见路由文档。
v-once 只渲染元素和组件一次，优化更新渲染性能
觉得v-once这个api蛮6的，应该很多小伙伴都没有注意到这个api。
文档介绍：
这个api在我看来主要用于那些一次性渲染，并且不会再有操作更改这些渲染的值，这样就可以优化双向绑定的更新性能。
文档推荐：对低开销的静态组件使用 v-once
尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：
Vue.component('terms-of-service', { template: '
Terms of Service
...很多静态内容... '})
登录后复制
vue风格指南推荐：
写到这里想到vue框架还有一个风格指南推荐，如下图所示，大家也可以学习一波。
相关推荐：
Vue.js2.0变化小结分享
Vue.js 2.5新特性分享
Vue.js的组件和模板详解
以上就是Vue实践过程中的几个问题汇总的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2788433.html
