VUE 使用中遇到过的坑 _前端开发者

前端开发者vue.js

https://www.rokub.com

前言vue如今可谓是一匹黑马, github star数已居第一位! 前端开发对于vue的使用已经越来越多, 它的优点就不做介绍了, 本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结, 帮助大家踩坑。
如果喜欢的话可以点波赞, 或者关注一下, 希望本文可以帮到大家!!!———-我是分割线本篇介绍的问题大概如下: 路由变化页面数据不刷新问题 setTimeout / setInterval(泛指异步回掉函数的this指向) this指向改变, 无法用this访问vue实例 setInterval路由跳转继续运行并没有及时进行销毁 vue 滚动行为用法, 进入路由需要滚动到浏览器底部 头部等等 实现vue路由拦截浏览器的需求, 进行 一系列操作 草稿保存等等 v – once 只渲染元素和组件一次, 优化更新渲染性能 vue本地代理配置 解决跨域问题, 仅限于开发环境 本地开发 没有任何问题 部署服务器 就404啊这些问题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 } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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); } 1 2 3 4 5 6 7 8 9 10 11 //setTimeout/setInterval ajax Promise等等 data ( ) { return { . . . } } , methods ( ) { setTimeout ( function ( ) { //其它几种情况相同 console . log ( this ) ; //此时this指向并不是vue实例 导致操作的一些ma’f } , 1000 ) ; }解决方案 变量赋值和箭头函数var和let的区别//使用变量访问this实例 let self=this; setTimeout(function () { console.log(self);//使用self变量访问this实例 },1000); //箭头函数访问this实例 因为箭头函数本身没有绑定this setTimeout(() => { console.log(this); }, 500); 1 2 3 4 5 6 7 8 9 10 //使用变量访问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); }, 1 2 3 4 5 //组件销毁前执行的钩子函数,跟其他生命周期钩子函数的用法相同。
beforeDestroy ( ) { //我通常是把setInterval()定时器赋值给this实例,然后就可以像下面这么停止。
clearInterval ( this . intervalId ) ; } ,4. vue 滚动行为用法,进入路由需要滚动到浏览器底部 头部等等使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。
vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
1 2 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。
vue – router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
注意: 这个功能只在支持 history.pushState 的浏览器中可用。
路由设置如下: 详情猛戳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: […] }) 1 2 3 4 5 6 7 8 9 10 11 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路由拦截浏览器的需求,进行一系列操作 草稿保存等等场景:为了防止用户失误点错关闭按钮等等,导致没有保存已输入的信息(关键信息)。
用法://在路由组件中:…beforeRouteLeave (to, from, next) {if(用户已经输入信息){ //出现弹窗提醒保存草稿,或者自动后台为其保存 }else{ next(true);//用户离开 } } 1 2 3 4 5 6 7 8 if ( 用户已经输入信息 ) { //出现弹窗提醒保存草稿,或者自动后台为其保存 } else { next ( true ) ; //用户离开 } }还有beforeEach、beforeRouteUpdate这些生命周期函数 详情猛戳6. v-once 只渲染元素和组件一次,优化更新渲染性能v-once这个指令相信大家用的很少,不过个人感觉还是挺实用的! 1 v – once 这个指令相信大家用的很少 , 不过个人感觉还是挺实用的!只渲染元素和组件一次。
随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。
这可以用于优化更新性能。
这个就不举例子了 直接猛戳这 v-once7. 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) }) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //比方说你要访问 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配置 1 2 1 : vue – router 的 history 模式 2 : 服务 nginx 配置。

 

前端开发者丨Vue.js

https://www.rokub.com

» 本文来自:前端开发者 » 《VUE 使用中遇到过的坑 _前端开发者》
» 本文链接地址:https://www.rokub.com/308.html
» 您也可以订阅本站:https://www.rokub.com
赞(1)
64K

评论 抢沙发

评论前必须登录!