Vue踩坑系列
前言
前端开发对于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
}
} }
2. 异步回调函数中使用this无法指向vue实例对象
//setTimeout/setInterval ajax Promise等等
data(){
return{
...
}
},
methods (){
setTimeout(function () { //其它几种情况相同
console.log(this);//此时this指向并不是vue实例 导致操作的一些ma'f
},1000);
}
解决方案 变量赋值和箭头函数
//使用变量访问this实例
let self=this;
setTimeout(function () {
console.log(self);//使用self变量访问this实例
},1000); //箭头函数访问this实例 因为箭头函数本身没有绑定this
setTimeout(() => {
console.log(this);
}, 500);
结语
这篇文章只是开始,它的待续还会很长很长,希望你我坚持下去!也希望我能帮助到更多的人,当然也会让我真正沉淀一下,为了以后为了将来 一起努力如果大家有什么问题,或者需要补充的 欢迎留言!
如果觉得文章对大家有帮助,希望大家能点赞一下或者关注一下,得到肯定的我会更加努力!~~
Vue踩坑系列的更多相关文章
- vue踩坑记
vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...
- vue踩坑之旅 -- computed watch
vue踩坑之旅 -- computed watch 经常在使用vue初始化组件时,会报一些莫名其妙的错误,或者,数据明明有数据,确还是拿不到,这是多么痛苦而又令人忍不住抓耳挠腮,捶胸顿足啊 技术点 v ...
- jmeter踩坑系列
1.踩坑系列一: 抓包出来有host的字段,放到jmeter里面一起请求就报错了,去掉就请求正常了 1.踩坑系列二: 从花瓶复制过去 的values 前面有空格,肉眼看起来没有
- WebGL 踩坑系列-3
WebGL 踩坑系列-3 绘制球体 在 WebGL 中绘制物体时需要的顶点是以直角坐标表示的, 当然了,gl_Position 是一个四维的向量,一般将顶点赋值给 gl_Position 时,最后一维 ...
- python踩坑系列之导入包时下划红线及报错“No module named”问题
python踩坑系列之导入包时下划红线及报错“No module named”问题 使用pycharm编写Python时,自己写了一个包(commontool),在同级另一个路径下(fileshand ...
- 『vue踩坑日常』 在index.html中引入静态文件不生效
Vue日常踩坑日常 -- 在index.html中引入静态文件不生效问题 本文针对的是Vue小白,不喜勿喷,谢谢 出现该问题的标志如下 控制台warning(Resource interpreted ...
- vue踩坑(二):跨域以及携带cookie
最近后台需求要在请求的时候传cooki给后台,正常情况下拿到cookie后存在cookie里,同域名下是会自己带到请求头里的,但是因为要在本地调试,那么问题就来了,localhost:8080下面的c ...
- vue 踩坑记录
1.绑定双击事件用 @dblclick 不要用@ondblclick 在vue中@=on 2.Vue中路由跳转踩坑. 比如我的路由如下定义 routes: [ { path: "/&quo ...
- 踩坑系列の Oracle dbms_job简单使用
二话不说先上代码 --创建存储过程 create or replace procedure job_truncateState is begin --此处就是要定时执行的sql execute imm ...
随机推荐
- MySQL数据库笔记二:数据类型及数据库操作
三.MySQL数据库数据类型 MySQL数据库中支持多种数据类型:数值型.字符型.日期型 常用的数据类型: 1.整型 int:整形,存储整数 int(M):M表示预期值.与存储大小和数值的范围无关. ...
- DataGrip导出查询结果数据
1 按钮 2 选择保存位置即可
- python常有模块:模块、引入语法、两种执行方式、模块搜索顺序
今天主要讲了以下几点:一.模块三问.定义及分类二.import和from的语法三.文件的两种执行方式及搜索顺序四.内置函数 一.模块.import和from的语法 1.什么是模块 模块是一堆功能函 ...
- SpringData JPA 在解析实体类字段时驼峰自动添加下划线问题
参考地址:https://my.oschina.net/javamaster/blog/2246886 SpringData JPA 使用的默认命名策略是: ImprovedNamingStrateg ...
- Linux配置python环境2,安装python
安装锁需要的依赖包 sudo apt-get -y install gcc-5 g++-5 libc6-dev make build-essential libssl-dev zlib1g-dev l ...
- ESP8266常见问题汇总——转载自官网
ESP8266 常见问题 本页面收集esp8266常见问题 概述 本文档主要介绍开发者在ESP8266开发中常见的一些问题. 这些问题主要包括以下几大类: 基本概念相关 ESP8266 相关 AiCl ...
- 【C#-批量插入数据到数据库】DataTable数据批量插入数据的库三种方法:SqlCommand.EcecuteNonQurery(),SqlDataAdapter.Update(DataTable) ,SqlBulkCopy.WriteToServer(Datatable)
第一种方法:使用SqlCommand.EcecuteNonQurery() 效率最慢 第二种方法:使用SqlDataAdapter.Update(DataTable) 效率次之 第三种方法:使用 ...
- USACO14MAR The Lazy Cow(Gold)
题目 题意:平面上有 \(n\) 块草地,第 \(i\) 块草地坐标为 \((x_i,y_i)\) ,上面有 \(g_i\) 个单位的草.Bessie 可以吃到距离起始点不超过 \(k\)(这里是曼哈 ...
- SQL Server、SSMS的单独安装
喜欢尝新版本的,可以单独安装数据库.界面管理软件. 不喜欢折腾的可以只安装SQL Server(全选安装,自带界面管理工具) 1.SQL Server,下载地址https://www.microsof ...
- Battle ships HDU - 5093二分匹配
Battle shipsHDU - 5093 题目大意:n*m的地图,*代表海洋,#代表冰山,o代表浮冰,海洋上可以放置船舰,但是每一行每一列只能有一个船舰(类似象棋的車),除非同行或者同列的船舰中间 ...