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 相关文章推荐
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
vue webpack重写cookie路径的方法
Jul 10 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输入流php://input使用浅析
2014/09/02 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python迭代器的使用方法实例
2013/11/21 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
Python线程创建和终止实例代码
2018/01/20 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
python使用zip将list转为json的方法
2018/12/31 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
金融行业务员的自我评价
2013/12/13 职场文书
岗位职责说明书
2014/05/07 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
离婚协议书格式范本
2016/03/18 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python