设为首页 - 加入收藏 延安站长网 (http://www.0911zz.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 数据 平台 手机 中国
当前位置: 首页 > 综合聚焦 > 移动互联 > 评测 > 正文

Vue使用技巧和项目中遇到的问题

发布时间:2019-03-26 07:24 所属栏目:[评测] 来源:易水人去丶明月如霜
导读:这里给大家分享一下Vue中的一些技巧,希望对大家有用处。(话不多说上代码) 1. Vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息。) //在路由组件中: mounted(){ }, beforeRouteLeave(to,from,next){ if(用户已

Vue使用技巧和项目中遇到的问题

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

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

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

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

2. 路由懒加载写法:

  1. // 我所采用的方法,个人感觉比较简洁一些,少了一步引入赋值。 
  2. const router = new VueRouter({ 
  3.  routes: [ 
  4.  path: '/app', 
  5.  component: () => import('./app'), // 引入组件 
  6.  ] 
  7. }) 
  8. // Vue路由文档的写法: 
  9. const app = () => import('./app.vue') // 引入组件 
  10. const router = new VueRouter({ 
  11.  routes: [ 
  12.  { path: '/app', component: app } 
  13.  ] 
  14. }) 
  15. //前端全栈学习交流圈:866109386 
  16. //面向1-3经验年前端开发人员 
  17. //帮助突破技术瓶颈,提升思维能力 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上代码:

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

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

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

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

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

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

选项:deep

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

选项:immediate

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章