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 相关文章推荐
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
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
做一个有下拉功能的留言版
2006/10/09 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
js 学习笔记(三)
2009/12/29 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
python抓取百度首页的方法
2015/05/19 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
pymysql模块的操作实例
2019/12/17 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
造价工程师个人求职信
2013/09/21 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
《故乡》教学反思
2014/04/10 职场文书
保护环境倡议书500字
2014/05/19 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
2014年团队工作总结
2014/11/24 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
Python实现抖音热搜定时爬取功能
2022/03/16 Python
python井字棋游戏实现人机对战
2022/04/28 Python