1. 首页
  2. 前端

Vue使用中遇到的问题及解决方法

如今vue在前端领域可谓称得上是一头猛狮,它优化、解决了angularJS中存在的缺陷,借鉴了react中的优点,github star数已居第一位!前端开发对于vue的使用已经越来越多,它的优点就不做介绍了。
就平时工作中,对vue的使用所踩过的坑,及朋友问过我的问题进行了一些总结,让大家少走弯路,避免采坑。如果觉得不错的话,动动你的手指,点个大大的赞!

问题目录汇总:

  1. 路由变化页面数据不刷新问题
  2. setTimeout/setInterval(泛指异步回掉函数的this指向)this指向改变,无法用this访问VUe实例
  3. setInterval路由跳转继续运行并没有及时进行销毁
  4. vue 滚动行为用法,进入路由需要滚动到浏览器底部 头部等等
  5. 实现vue路由拦截浏览器的需求,进行 一系列操作 草稿保存等等
  6. v-once 只渲染元素和组件一次,优化更新渲染性能
  7. vue本地代理配置 解决跨域问题,仅限于开发环境
  8. 本地开发 没有任何问题 部署服务器 就404啊这些问题

1. 路由变化页面数据不刷新问题

出现这种情况是因为依赖路由的params参数获取写在created或者mounted生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到实时监听,退出页面再进入另一个文章页面并不会运行created/mounted组件生命周期,导致文章数据还是第一次进入的数据。

解决方法:使用watch监听路由是否变化

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
      }
   }
}

2. 异步回调函数中使用this无法指向vue实例对象

//setTimeout/setInterval ajax Promise等等

data(){
   return{
     ...
   }
},
methods(){
   setTimeout(function(){//其它几种情况相同
      console.log(this);//此时this指向并不是vue实例,导致操作的一些麻烦
   },1000);
}

解决方案:变量赋值和使用箭头函数

//方法1:使用变量访问this实例
let that=this;
setTimeout(function(){
   console.log(that);//使用that变量访问this实例
},1000);
//方法2:使用箭头函数访问this实例 因为箭头函数本身没有绑定this
setTimeout(()=>{
   console.log(this);
},500);

3. setInterval路由跳转继续运行并没有及时进行销毁

例如:网页上的一些弹幕,走马灯文字,实时轨迹等,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后台调用,控制台会不断报错,如果运算量大的话,无法及时清除,会导致严重的页面卡顿,直至页面崩溃。

解决办法:在组件生命周期beforeDestroy停止setInterval

//组件销毁前执行的钩子函数,跟其他生命周期钩子函数的用法相同。

beforeDestroy(){

   //我通常是把setInterval()定时器赋值给this实例,然后就可以像下面这么停止。

   clearInterval(this.intervalId);

},

4. vue 滚动行为用法,进入路由需要滚动到浏览器底部/头部/指定位置等

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。

vuerouter能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

路由设置如下:Vue滚动知识详情猛戳

constrouter=newVueRouter({

   mode:'history',

   scrollBehavior(to,from,savedPosition){

      if(savedPosition){    //如果savedPosition存在,滚动条会自动跳到记录的值的地方

         returnsavedPosition

      }else{

         return{x:0,y:0}    //savedPosition也是一个记录x轴和y轴位置的对象
      }
   }   routes:[...]

})

5. 实现vue路由拦截浏览器的需求,进行一系列操作,草稿保存等等

场景:
为了防止用户失误点错关闭按钮等等,导致没有保存已输入的信息(关键信息)。
用法:
//在路由组件中:

beforeRouteLeave (to, from, next) {
   if(用户已经输入信息){
       //出现弹窗提醒保存草稿,或者自动后台为其保存
   }else{
       next(true);//用户离开
   }
}

还有beforeEach、beforeRouteUpdate这些生命周期函数 详情猛戳

6. v-once 只渲染元素和组件一次,优化更新渲染性能

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
这个就不举例子了 直接猛戳这 v-once

7. vue本地代理配置 解决跨域问题,仅限于开发环境

这个本地代理用来解决开发环境下的跨域问题,跨域可谓老生常谈的问题了,proxy 在vue中配置代理非常简单

//比方说你要访问 http://192.168.1.xxx:8888/backEnd/paper这个接口
//配置  config.js下面proxyTable对象
proxyTable:{
   '/api':{
      target:'http://192.168.3.200:8888',//目标接口域名有端口可以把端口也写上
      //或者prot本地起服务端口与服务端统一
      changeOrigin:true,
   }
},

// 发送request请求
axios.get('/api/page').then((res)=>{//按代理配置 匹配到/backEnd就代理到目标target地址
   console.log(res)// 数据完全拿得到  配置成功
   this.newsList=res.data
},(err)=>{
   console.log(err)
})

8. 本地开发没有任何问题,部署服务器刷新就404问题

由于前端路由缘故,单页面应用应该放到nginx或者apache、tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址

注意点

解决方法:

1.对于vuerouterhistory模式:取消history模式即可。

2.服务nginx配置:若取消history觉得#比较难看,想使用history模式怎么办,请猛戳这里

结语

此处列了部分vue问题解决办法 ,更多优质博文请关注本站!

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/423

发表评论

邮箱地址不会被公开。 必填项已用*标注

评论列表(1条)

  • 清风明月 2018年11月2日 上午8:49

    大家工作中还遇到什么比较典型的问题,欢迎在这里留言。

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code