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

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

创新互联建站-专业网站定制、快速模板网站建设、高性价比洛南网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式洛南网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖洛南地区。费用合理售后完善，10多年实体公司更值得信赖。

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

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

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

2. 路由懒加载写法: 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上代码：

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

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

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

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

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

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

选项：deep

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

选项：immediate

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

     
 
 
 
    
      
  
  
  
  1. watch: {
    2. 
      
  
  
  
  2.  obj: {
    3. 
      
  
  
  
  3.   handler(val, oldVal) {
    4. 
      
  
  
  
  4.   console.log('属性发生变化触发这个回调',val, oldVal);
    5. 
      
  
  
  
  5.   },
    6. 
      
  
  
  
  6.   deep: true // 监听这个对象中的每一个属性变化
    7. 
      
  
  
  
  7.  },
    8. 
      
  
  
  
  8.  step: { // 属性
    9. 
      
  
  
  
  9.   //watch
    10. 
      
  
  
  
  10.   handler(val, oldVal) {
    11. 
      
  
  
  
  11.   console.log("默认触发一次", val, oldVal);
    12. 
      
  
  
  
  12.   },
    13. 
      
  
  
  
  13.   immediate: true // 默认触发一次
    14. 
      
  
  
  
  14.  },
    15. 
      
  
  
  
  15.  },
    16.

文章名称：Vue使用技巧和项目中遇到的问题
网页链接：http://www.shufengxianlan.com/qtweb/news19/210119.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

搜索引擎优化知识

行业网站建设

小谭建站　　 　谷歌优化排名　　 　搜索引擎优化　　 　成都温江机房　　 　汕尾凯敏网站　　 　成都商城网站建设　　 　四川成都网站制作　　 　盐亭网站制作公司　　 　网站方案　　 　四川成都seo网站优化　　 　重庆网站建设　　 　川银永信　　 　云服务器　　 　一元广告　　 　网创优客　　 　成都网站制作　　 　香港虚拟主机空间　　 　成都外贸网站建设　　 　php空间　　 　成都商城网站建设公司