VUE 使用中踩过的坑

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

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

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

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

  1.     watch: {

  2.     // 方法1

  3.      '$route' (to, from) { //监听路由是否变化

  4.        if(this.$route.params.articleId){// 判断条件1  判断传递值的变化

  5.          //获取文章数据

  6.        }

  7.      }

  8.      //方法2

  9.      '$route'(to, from) {

  10.        if (to.path == "/page") {    /// 判断条件2  监听路由名 监听你从什么路由跳转过来的

  11.           this.message = this.$route.query.msg    

  12.        }

  13.      }      

  14.    }

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

  1.    //setTimeout/setInterval ajax Promise等等

  2.    data(){

  3.      return{

  4.        ...

  5.      }

  6.    },

  7.    methods (){

  8.         setTimeout(function () {   //其它几种情况相同

  9.          console.log(this);//此时this指向并不是vue实例 导致操作的一些ma'f

  10.        },1000);

  11.    }

解决方案:变量赋值和箭头函数。(参考:var和let的区别:http://blog.csdn.net/nfer_zhuang/article/details/48781671)

  1.     //使用变量访问this实例

  2.    let self=this;  

  3.        setTimeout(function () {  

  4.          console.log(self);//使用self变量访问this实例

  5.        },1000);

  6.  

  7.     //箭头函数访问this实例 因为箭头函数本身没有绑定this

  8.     setTimeout(() => {

  9.       console.log(this);

  10.     }, 500);

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

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

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

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

  2.    beforeDestroy(){

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

  4.        clearInterval(this.intervalId);

  5.    },

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

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

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

路由设置如下:(详情猛戳:https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html)

  1.     const router = new VueRouter({

  2.       mode: 'history',

  3.     scrollBehavior (to, from, savedPosition) {

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

  5.           return savedPosition

  6.         } else {

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

  8.          }

  9.         },

  10.       routes: [...]

  11.     })

 

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

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

用法:

  1. //在路由组件中:

  2.   ...

  3.   beforeRouteLeave (to, from, next) {

  4.      if(用户已经输入信息){

  5.        //出现弹窗提醒保存草稿,或者自动后台为其保存

  6.  

  7.      }else{

  8.        next(true);//用户离开

  9.      }

  10.    }

还有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 中配置代理非常简单:

  1.    //比方说你要访问 http://192.168.1.xxx:8888/backEnd/paper这个接口

  2.    //配置  config.js下面proxyTable对象

  3.    proxyTable: {

  4.                '/backEnd':{

  5.                    target:'http://192.168.3.200:8888', //目标接口域名有端口可以把端口也写上

  6.                                                        //或者prot本地起服务端口与服务端统一

  7.                    changeOrigin:true,    

  8.                }

  9.    },

  10.    // 发送request请求

  11.       axios.get('/backEnd/page')  //按代理配置 匹配到/backEnd就代理到目标target地址

  12.        .then((res) => {

  13.           console.log(res) // 数据完全拿得到  配置成功

  14.          this.newsList = res.data

  15.        }, (err) => {

  16.          console.log(err)

  17.        })

  1.  

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

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

注意点:

  1. vue-router的 history 模式

  2. 服务nginx配置

这个问题讲完整今天我下不了班了!具体详情可以猛戳:如何部署单页面项目到服务(https://segmentfault.com/a/1190000012675012)

结语

这篇文章只是开始,它的待续还会很长很长,希望你我坚持下去!也希望我能帮助到更多的人。当然也会让我真正沉淀一下,为了以后为了将来一起努力。如果大家有什么问题,或者需要补充的,欢迎留言!我会进行补全的!详细版本我稍后也会上传到 gitHub!

如果觉得文章对大家有帮助,希望大家能点赞一下或者关注一下,得到肯定的我会更加努力!~~

转载于:https://www.cnblogs.com/liuhao-web/p/8706197.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/427879.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++ 圆上任意点坐标计算_线性代数总结 第三章 向量代数与几何计算(空间平面和直线)...

我的公众号“每日晴天”,可关注领取我的笔记pdf版哦~------------------------------------------------------------------------------一、向量1、简单的高中那些就不说了....2、左右手系:右手系:将右手四指(拇指除外&#xff0…

[poj3321]Apple Tree_dfs序_树状数组

Apple Tree poj-3321 题目大意:给你一个根固定的树,每一个点的点权是0或1,查询子树点权和。 注释:$1\le n \le 10^5$。 想法:刚刚学习dfs序,刷到水题偶哈哈。 什么是dfs序?就是在遍历树的时候记…

axure实现搜索功能_vue实现模糊搜索功能

首先写好一个列表写好的样式是这样滴操作来了在computed里面定义了一个search函数 使用filter过滤接下来在method 里面写一个sousuo1函数 进行一个判断 如果搜索这个输入框框里是空 就是展示原数据 如果这个不为空 就会展示搜索到的数据最后 很重要把list改为sousuo1()这个函数…

HOSTNAME问题 和yum配置163源的操作 安装lsb_release,KSH,CSH

HOSTNAME 在 /etc/hosts 里添加一行 127.0.0.1 yourhostname yum配置 来自http://www.cnblogs.com/wutengbiao/p/4188986.html 下载方法1: cd /etc/yum.repos.d/wget http://mirrors.163.com/.help/CentOS6-Base-163.repovi CentOS6-Base-163.repo 把文件里面的$rel…

开机自启动脚本_使用xtu降低笔记本(游戏本)cpu电压及功耗·游戏本延时(以及试着解决开机自启动的问题)...

(额,这应该是我的第一篇真正意义上的博客吧(?),虽然是发在了知乎上,上个月忙了一个月的建站方面的事情,但是服务器买在了国内,昂,然后就没了)为什…

7000更换控制器电源步骤_开关电源控制环路(初级篇:上)

本文是 21Dianyuan 社区原创技术文章,作者 ctus220,感谢作者的辛苦付出。内容目录:1、环路和直流稳压电源的关系2、与环路相关的基本概念波特图,环路稳定性判据,传递函数,零极点3、常用的补偿控制器PI&…

thymeleaf 模板语言简介

参考网址: https://blog.csdn.net/mlin_123/article/details/51816533 1.1 Thymeleaf 在有网络和无网络的环境下皆可运行,而且完全不需启动WEB应用,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果…

python实现排列组合公式算法_朴素贝叶斯算法的Python实现

朴素贝叶斯分类算法被广泛应用于文本分类场景中、包含垃圾邮件、互联网新闻等分类任务,属于有监督学习算法。它独立考量每一维度特征被分类的条件概率,然后综合这些概率对其所在的特征向量做出分类预测,即“假设各个维度上的特征被分类的条件…

c语言操作符总结

一.算术操作符 包括:、 - 、* 、 / 、 % 1.除了%操作符之外,其他的几个操作符可以作用与整数和浮点数。 2.对于/操作符,如果两个操作数都为整数,执行整数除法。而只要有浮点数执行的就是浮点数除法。 3.%操作符的两个操作数必须…

cdr怎么做文字路径_整理128张图片,告诉你文字少的PPT应该怎么做?

点击上方蓝字关注↑,下次看文更方便!微信扫码观看全套Excel、Word、PPT视频作者:自律的音律 来源:自律的音律(ID:yinlvPPT)哈喽,又到周一干货时间。我经常被问到一个问题,PPT 字多的时候&#…

QT安装配置是注意事项

1、源码所在路径不能包含中文 2、构建目录必须和源码目录同级别(在一个文件夹下) 2.1 在 “项目”---构建设置--摘要--构建目录 中 设置构建目录 3、构建套件必须选择正确,否则无法编译 3.1 点击左下角 Debug图标,选择合适的构建…

网件rax40可以刷梅林_美国网件发布全系列Wi-Fi6家用无线路由器,部署未来家用产品市场...

5月25日,美国网件在深圳海上世界文化艺术中心发布全线WiFi 6产品,即RAX40、RAX80、RAX120、RAX200四款产品,重新布局WiFi市场,理论速度远远超出大多数家庭互联网连接所能提供的速度。新产品支持下一代Wi-Fi标准——802.11ax&#…

scikit-learn 学习笔记-- Generalized Linear Models (三)

Bayesian regression 前面介绍的线性模型都是从最小二乘,均方误差的角度去建立的,从最简单的最小二乘到带正则项的 lasso,ridge 等。而 Bayesian regression 是从 Bayesian 概率模型的角度出发的,虽然最后也会转换成一个能量函数的…

ios 部分string颜色_iOS-代码混淆加固方案

对于iOS来说,由于系统是封闭的,APP上架需要通过App Store,安全性来说相当高。但是对于大厂和知名APP而言,别人给的安全保障永远没有自己做的来得踏实。所以对于大厂、少部分企业级和金融支付类应用来说加固是相当重要的。下面是目…

Python入门基础之迭代和列表生成式

什么是迭代 在Python中,如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们成为迭代(Iteration)。 在Python中,迭代是通过 for ... in 来完成的,而很多语言比如C或…

安川最小巧机器人_2020工博会,安川展品前瞻(机器人篇)

~基于YASKAWA(安川)核心产品和i-Mechatronics(i立方-机电一体化)概念,实现客户的生产改革~这次的中国国际工业博览会安川将展出至今为止最多的演示机数量。•提供现在重点关注的智能制造、半导体、汽车制造个性化解决方案•提供适用于所有生产…

EF关闭自动创建数据库表的方式

public class MyEF:DbContext{public MyEF():base("nameCodeFirstDb"){Database.SetInitializer<MyEF>(null);}} } 转载于:https://www.cnblogs.com/kangyuanjiang/p/8726182.html

如何调度spark程序_如何定时,周期性的运行程序?Python APScheduler实现任务灵活调度...

在我们的开发工作中&#xff0c;时常会有这样的开发需求&#xff0c;如需要定时或者周期性的运行某些程序&#xff0c;因此经常用到一些定时服务&#xff0c;如在 Linux系统中使用 Crond 服务实现程序的定时运行。在 Python中也有这样的一个模块&#xff0c;那就是 APScheduler…

caffe生成voc格式lmdb

要训练ssd基本都是在liu wei框架下改&#xff0c;生成lmdb这一关照葫芦画瓢总遇坑&#xff0c;记录之&#xff1a; 1. labelmap_voc.prototxt要根据自己的分类修改&#xff0c;比如人脸检测改成这样&#xff1a; item {name: "none_of_the_above"label: 0display_nam…

redis实现轮询算法_【07期】Redis中是如何实现分布式锁的?

点击上方“Java面试题精选”&#xff0c;关注公众号面试刷图&#xff0c;查缺补漏分布式锁常见的三种实现方式&#xff1a;数据库乐观锁&#xff1b;基于Redis的分布式锁&#xff1b;基于ZooKeeper的分布式锁。本地面试考点是&#xff0c;你对Redis使用熟悉吗&#xff1f;Redis…