vue使用技巧及vue项目中遇到的问题


Posted in Javascript onJune 04, 2018

这里给大家分享一下vue中的一些技巧,希望对大家有用处。(话不多说上代码)

1,vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息。)

//在路由组件中:
mounted(){
},
beforeRouteLeave (to, from, next) {
 if(用户已经输入信息){
 //出现弹窗提醒保存表单,或者自动后台为其保存
 
 }else{
 next(true);//用户离开
 }

请参考vue文档全局钩子和组件钩子

2,路由懒加载写法:

// 我所采用的方法,个人感觉比较简洁一些,少了一步引入赋值。
 const router = new VueRouter({
  routes: [
  path: '/app',
  component: () => import('./app'), // 引入组件
  ]
 })
 // Vue路由文档的写法:
 const app = () => import('./app.vue') // 引入组件
 const router = new VueRouter({
  routes: [
  { path: '/app', component: app }
  ]
 })

3,路由的项目启动页和404页面

一般项目都会设置这个,如果默认进入地址会跳到login页面,如果你输入的是一个没有用的路由或者是空路由会跳转到notFind页面(你自己设置的404页面)

export default new Router({
  routes: [
  {
   path: '/', // 项目启动页
   redirect:'/login' // 重定向到下方声明的路由 
  },
  {
   path: '*', // 404 页面 
   component: () => import('./notFind') // 或者使用component也可以的
  },
  ]
 })

4,setInterval路由跳转继续运行并没有销毁问题

beforeDestroy(){
  //我通常是把setInterval()定时器赋值给this实例,然后就可以像下面这么暂停。
 clearInterval(this.intervalid);
},

beforeDestroy方法是生命周期里组件销毁前执行的钩子函数,在离开的时候会触发这个方法,这个方法在其他的地方也会有妙用,希望大家可以去了解一下。

5,setTimeout/setInterval this指向改变,无法用this访问VUe实例

这个地方大家的默认方法肯定是:

//使用变量访问this实例
 let self=this;
  setTimeout(function () { 
   console.log(self);//使用self变量访问this实例
  },1000);

其实这个地方我们可以用箭头函数,因为箭头函数会改变this的指向,而指向的刚好是自己的父级this,所以我们可以这样用:

//箭头函数访问this实例 因为箭头函数本身没有绑定this
  setTimeout(() => { 
  console.log(this);
 }, 500);

这样我们的this就是指向我们的vue实例了。

6,Vue 数组/对象更新 视图不更新

方法一:直接使用最简单也是最有效的方法,深拷贝对象或者数组,视图会进行更新,不过会有一个缺点,深拷贝后的数组或者对象不是原来的那个数组或者对象,是你现在改变了之后的值。

上代码:

你的对象或者数组=JSON.parse(JSON.stringify(你的对象或者数组))
先进行转字符串,再转回对象,这个就进行了一个拷贝的过程,会触发视图的改变,同时也进行了一个数组的替换,有利有弊。

方法二:this.$set(你要改变的数组/对象,你要改变的位置/key,你要改成什么value)

this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象

这个是vue专门为改变不了数组设定的一个方法,使用也很简单(如果还是不懂请参考vue文档)

7,深度watch与watch立即触发回调

watch很多人都在用,但是这watch中的这两个选项deep、immediate,或许不是很多人都知道,我猜。

选项:deep

在选项参数中指定 deep: true,可以监听对象中属性的变化。

选项:immediate

在选项参数中指定 immediate: true, 将立即以表达式的当前值触发回调,也就是默认触发一次。

watch: {
  obj: {
   handler(val, oldVal) {
   console.log('属性发生变化触发这个回调',val, oldVal);
   },
   deep: true // 监听这个对象中的每一个属性变化
  },
  step: { // 属性
   //watch
   handler(val, oldVal) {
   console.log("默认触发一次", val, oldVal);
   },
   immediate: true // 默认触发一次
  },
  },

总结

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

Javascript 相关文章推荐
javascript延时加载之defer测试
Dec 28 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
利用PHP实现递归删除链表元素的方法示例
Oct 23 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 #jQuery
js如何找出字符串中的最长回文串
Jun 04 #Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 #Javascript
jQuery实现的简单获取索引功能示例
Jun 04 #jQuery
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 #Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 #Javascript
You might like
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
理解javascript模块化
2016/03/28 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
复古服装:RetroStage
2019/05/10 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
八一演出活动方案
2014/02/03 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫