VUE 使用中踩过的坑


Posted in Javascript onFebruary 08, 2018

前言

vue如今可谓是一匹黑马,github star数已居第一位!前端开发对于vue的使用已经越来越多,它的优点就不做介绍了,本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结,帮助大家踩坑。如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家!

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

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

解决方法: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实例 导致操作的一些ma'f
 },1000);
}

解决方案:变量赋值和箭头函数。(参考:var和let的区别://3water.com/article/134704.htm)

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

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

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

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

//组件销毁前执行的钩子函数,跟其他生命周期钩子函数的用法相同。
 beforeDestroy(){
//我通常是把setInterval()定时器赋值给this实例,然后就可以像下面这么停止。
 clearInterval(
this
.intervalId);
 },

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

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

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

路由设置如下:(详情猛戳: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: [...]
 })

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

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

用法:

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

}

还有beforeEach、beforeRouteUpdate这些生命周期函数。 详情猛戳:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

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

v-once 这个指令相信大家用的很少,不过个人感觉还是挺实用的!

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

这个就不举例子了,直接猛戳这:v-once(https://cn.vuejs.org/v2/api/#v-once)

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

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

//比方说你要访问 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)
 })

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

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

注意点:

  1. vue-router的 history 模式
  2. 服务nginx配置

总结

以上所述是小编给大家介绍的VUE 使用中踩过的坑,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
node.js环境搭建图文详解
Sep 19 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 #Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 #Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 #Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 #Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 #jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 #jQuery
AnglarJs中的上拉加载实现代码
Feb 08 #Javascript
You might like
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
PHP If Else(elsefi) 语句
2013/04/07 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
有趣的python小程序分享
2017/12/05 Python
Python中is和==的区别详解
2018/11/15 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python chardet库识别编码原理解析
2020/02/18 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
幼儿园教师备课制度
2014/01/12 职场文书
质量提升方案
2014/06/16 职场文书
评先进个人材料
2014/12/29 职场文书
小学教育见习总结
2015/06/23 职场文书
外出培训学习心得体会
2016/01/18 职场文书