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

这里给大家分享一下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 } ]})//前台全栈学习交流圈：866109386//面向1-3经验年前台开发人员//帮助突破技术瓶颈，提升思维能力

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

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

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

前台全栈学习交流圈：866109386,面向1-3经验年前台开发人员,帮助突破技术瓶颈，提升思维能力
群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

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"); // 改变对象

前台全栈学习交流圈：866109386,面向1-3经验年前台开发人员,帮助突破技术瓶颈，提升思维能力
群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

这个是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 // 默认触发一次 }, },